I've been coding for roughly 8 months now learning the in's & out's of web development. Really enjoying React & Redux. Very interested in Elixir & Python as well. I love my Jayhawks & dark beer!
Nothing here yet.
No blogs yet.
What I mean by connected is: import React, { Component } from 'react'; import { connect } from 'react-redux'; import fetchTodos from './actions'; import { Loading } from './commons'; @connect( state => ({ todos: state.todos }), { fetchTodos }) class Todo extends Component { state = { loading: true } componentDidMount() { (async () => { await this.props.fetchCategory('home'); this.setState({ loading: false }); })(); } _renderTodos() { const { todos } = this.props; todos.map(todo => { <li key={Math.random()}> todo </li> }); } render() { const component = loading ? <Loading /> : ( <ul> {this._renderTodos()} </ul> ) return component; } }
Anh Khoa Ngô do you have a link to your code? I will take a look at it and see if I can help. Ultimately you only want your store connected to the components you want to know what is happening with the store. If you are using redux I normally have things setup as follows: // index.js import React from 'react'; import { render } from 'react-dom'; import Root from './Root'; render(<Root />, document.getElementById('root'); // Root.js import React from 'react'; import { Provider } from 'react-redux'; import store from './redux/store'; import Routes from './Routes'; export default () => ( <Provider store={store}> <Routes /> </Provider> ); // Routes.js import React from 'react'; import { browserHistory, Route, Router } from 'react-router'; export default () => ( <Router history={browserHistory}> // your Routes here </Router> );
I hate CSS/design. I can code out the logic on front and backend, & really actually enjoy making documentation so I & others can know what is going on, but I can't build a UI to save my life. I become so disenfranchised with a project as soon as all the coding is done and I have to move to the UI/UX development.
@bebraw thanks so much for this information. I had figured out that module was representing ES6 code when looking at the Redux source code. I do tree shaking in my projects so I understood that. I was looking at your webpack demo last night. Very cool. Never would have thought of doing it like that. Thanks again!
I found this short tutorial on how to use webpack2 for authoring libraries: https://webpack.js.org/guides/author-libraries/ I am curious though is externals directly related to my dependencies ? If react is a dependency to my package I should not have it in my package right? It should be something I expect the user to have in their project. So including it as an external would make sense?
Yichen Lu if you are not persisting the state then yes on a page refresh the state will return to the initial state whether that be {} or if you have specified an actual initialState. If you are wanting to persist your state I would recommend the following package: https://github.com/rt2zz/redux-persist If you are losing your state on a page redirect or traveling to a different route using react-router you will want to use: https://github.com/reactjs/react-router-redux Hope I answered your question or at least provided you with some good resources!