Show data using Redux in Laravel

reactjs
laravel
mysql
redux

(Huy Hoàngg) #1

I have shown data using ReactJS but now I want to use Redux to show data instead. I tried but it’s too much error,so I will not put my redux code up. So how can I do?
Here’s my code using ReactJS only

Example.js

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {posts: []};
    }
    componentWillMount(){
        axios.get('http://127.0.0.1:8000/posts')
            .then(response => {
                this.setState({ posts: response.data });
            })
    }
    postRow(p){
        return (
            <tr key = {p.id}>
                <td>{p.title}</td>
                <td>{p.description}</td>
            </tr>
        )
    }
    render() {
        const posts = this.state.posts.map(post => this.postRow(post));
        return (<div>
                    <table border="1">
                        <thead>
                        <tr><th>Title</th><th>Description</th></tr>
                        </thead>
                        <tbody>{ posts }</tbody>
                    </table>
                </div>
        );
    }
}

RoutePath.js

export default class RoutePath extends Component{
    render(){
        return(
            <BrowserRouter>
                    <Switch><Route exact path='/' component={Example}/></Switch>
            </BrowserRouter>
        )
    }
}
ReactDOM.render(<RoutePath/>,document.getElementById('homepage'));

(Sáng Béo) #2

Actually, you’re still using ReactJS to present the data received from server.
Redux is just a library used to manage states of your React components.

I think you should post the error code and what error it is, so that we can help you to fix it.


(Khôi) #3

tui nghĩ ý bạn ấy nói là đã hiển thị dữ liệu được bằng reactjs rồi, bây giờ muốn hiển thị bằng redux nhưng mà nhiều lỗi quá nên ko up code redux lên :smiley:
Vô trang chủ redux.js.org tìm hiểu ấy bạn :smiley:


#4

ờ thì thứ nhất bạn nên post lỗi để hình dung và đưa cả code qua codesanbox nếu có thể
còn với axios bạn nên khai báo thành 1 service, để mỗi lần gọi chỉ import service chứ không gõ cả url. Việc này thuận tiện cho việc maintain/move api, chỉ việc đổi url 1 chỗ.


83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?