Tip: Start using Redux right away!

Tip: Start using Redux right away!
0

#1

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'));

Example on Codepen

Tell me if this helped you or if you see problems in the code.


#2

Thank you, I found it very useful and easy to understand. I’m about to learn how to use redux.


#3

It’s my opinion that the reason you learned to improve your app so dramatically is because you did it the hard way first. I’m a fan of doing something the hard way in order to understand how the ‘easy way’ improves the task at hand. In order for me to fully understand props, state, and where redux comes in, I had to work through a few the old fashioned way first.


#4

I second how easy Redux makes things, but I’m incredibly frustrated now with the Game of Life project, as I’m trying to store the board state as an array and updating this in an immutable way is very slow on larger board sizes.
I’m tempted to go back to pure React for this project, as I just don’t see a faster way to copy and replace an array of 1500+ elements each time I want to update a cell.


#5

I don’t think its the array that makes things slow but rather the manipulation of this many DOM nodes. I don’t think pure react will make things much faster. Please keep us updated if you go the other route. I had the same problem.


#6

Good point, I think first I’ll try and figure out how shouldComponentUpdate() could come into play and if this could help speed things along.


#7

I thought this might be a good place to jump in and ask about Redux-React design philosophy and experience. I’m about to wrap up a lengthy React tutorial on Udemy that’s covered a huge array of topics, so I decided to build my own app to put my new knowledge to the test.

Halfway through building out my components, I caught myself hooking up most of my components to Redux with connect() to get their needed information from the state directly. I was wondering if this was bad or not, and went searching. Discussions on github inevitably pointed to what Dan Abramov wrote about container/presentational component dichotomy.

My discovery was that hooking up UI/presentational/lower-level components to Redux state actually improves performance, but only hooking up “container” components to Redux and passing data to presentational children via props is preferred for clearer data flow for testing and making presentational/UI rendering components more pure/composable/reusable. What are people’s thoughts about this? For instance, I find myself wanting to hook up form/input components to Redux even though they’re presentational in nature.