React Programming


Redux provides a store object which maintains the application state, and can notify your React components when state changes.

Step by Step construction of a Redux app

Our app’s structure looks like this:

        <div>

                <Input onSubmittingEditing={a function}>

                <List list={this.props.someData} onClickItem={a function}>

        </div>

Both of the callback functions contain this:

        function callback(someArg) {

                this.props.dispatch(actionCreators.someAction(someArg))

        }

…where does actionCreators come from?  How did dispatch() get attached to props?

Answer:  at the top of our app we have:

        import { connect } from 'react-redux'

        import { actionCreators } from ‘./someOtherJsFile’

…and at the bottom:        

        export default connect(state => ({

  todos: state.todos,

}))(App)

someOtherJsFile.js will contain most of our Redux mechanics:

(1) actionCreators is just a hashmap with our functions’ names as keys.  Their values are functions, but they only prepare the work they do for other functions that will actually act on state.

        export const actionCreators = {

                  someAction1: arg => {

                            return { type: ‘someAction1’, payload: arg };

                  },

                  someAction2: arg => {

                            return { type: ‘someAction2’, payload: arg };

                  }

        };

The real work is done in a ‘cleanroom environment’ called a reducer.  

    export const reducer = (state = {someData: [’foo’, ‘bar’]}, action) => {

        const { someData } = state;

        const { type, payload } = action;

        if (type == ‘someFunction1’) return {someData: [payload]};

         if (type == ‘someFunction2’) return {

                someData: someData.filter((todo, i) => i !== payload)

        };

        return someData;  // a fail-safe, probably not reached

    };

You won’t see a call to reducer() in your code; that happens through the Redux framework.  What gets passed in the action arg is the decomposition of our actionCreator functions.

Our App uses only one state variable of its own. someData, and we are entrusting its manipulation to Redux.  We don’t update it with any setState() calls.  We initiate someData in our reducer() definition with a named argument.

(Note:  to make the code as explicit and brief as possible, I’ve omitted some standard practices, so see http://www.react.express/react_redux for a better way to write it.)

There is also a <List> and <Input> component, but they are completely unaware of Redux, and they don’t manipulate state.  Most of their important actions are methods defined in <App> and passed in as properties.

Dan Abramov’s tutorial

First complete app:  step 6, https://egghead.io/lessons/javascript-redux-store-methods-getstate-dispatch-and-subscribe

Tip


Links marked with arrow icons ( or ) will open in a new tab.

You will see this message only once.