I recently finished the recipe-box project and by the end of it I was really exhausted from keeping track of all the connections and data flow through my app.
The app seems simple but wiring everything correctly was kind of hard.
In a recent posting of the voting-app the camper thought about using redux but didn’t because he was already so drained by the project.
I think using redux really helps alleviating this pain.
I just started using it and I think one should start using it as soon as you want React components to interact with each other. The thought of wiring the components in a way that data can flow from one to the other is dreadful and redux makes this trivial.
I used this video series to learn https://www.youtube.com/watch?v=1w-oQ-i1XB8
I have prepared a minimal react-redux example that might help you kickstart using redux. I will not be going back.
/* we need 'react','react-dom','redux' and 'react-redux' added as js libraries */
/* define some state object to start with */
const initialState = {
greeting: "Hello",
name: "Joe"
};
/* the reducer. here is where we handle all our actions */
const reducer = (state, action) => {
if (action.type === "CHANGE_NAME") { // when a CHANGE_NAME action was fired
return { // return a new state object
...state, // with all the values of the previous state
name: action.payload.name // but overwrite name with the one from the payload of the action
}
}
return state; // return the old state if nothing useful happened
};
/* this creates the redux store, with our reducer, the initial state and redux-dev-tools enabled */
const store = Redux.createStore(reducer, initialState, window.devToolsExtension && window.devToolsExtension());
/* here is a normal react component */
class TestComponent extends React.Component {
render() { // with the usual render function
/* the redux state is injected through the props. we display a message and a button to fire an action */
return (
<div>
<h1>{this.props.greeting + " " + this.props.name}</h1>
<button onClick={this.handleClick.bind(this)}>Click</button>
</div>
);
}
handleClick() {
/* define the action to be fired as an object like so */
const action = {
type: "CHANGE_NAME", // this is how we identify the action in the reducer
payload: { // this is the data that the action will work with
name: "Joseph"
}
};
this.props.dispatch(action); // the dispatch function is the function to fire actions towards redux. It is made available to us via this.props
}
}
/* the connect function converts our react component to a redux enabled component */
const TestElement = ReactRedux.connect((state) => { // it takes a function as argument that specifies what variables of the state get injected into the props
return {greeting: state.greeting, name: state.name} // here we make greeting and name available via this.props. the dispatch function (this.props.dispatch) gets insjected automagically
})(TestComponent); // in the last parens we specify which component we want to convert to a redux component
/* your primary component must be wrapped in a Provider element that takes the store we defined at the beginning as a property */
/* notice how we use the converted component "TestElement" that was created with the connect function */
ReactDOM.render(<ReactRedux.Provider store={store}>
<TestElement></TestElement>
</ReactRedux.Provider>, document.getElementById('root'));
Tell me if this helped you or if you see problems in the code.