React-redux Usage Summary

React-redux Use summary React-redux store reducer Action integration storereduceraction supplement use Redux-dev-tools let change reducer to instantly Refresh page summary

Library Redux,react-redux,react-router-redux to use react-redux

Using a React-redux library makes the Redux easier to use, providing the provider and connect methods

Use in the Portal file first

<provider store={store}>
     < components/>  
</provider>

Store

This uses the important part of the Redux store, so the following first said that the store's file composition to take out all the data, if it is static to introduce JSON file, if it is dynamic using fetch or AJAX loading, from the server state Can be serialized and injected into the client without having to write more code, using native JSON data in development can speed up development and use the CreateStore in the Redux library to instantiate reducer and previous data in a Store,eg:const store = CreateStore (Rootreducer, defaultstate);

So the simplest store is ready, and then there's reducer to deal with Reducer .

The simple function of reducer is that depending on the action and the new state, the update here must return a new state instead of modifying it on the original state.

For example, to implement a feature that adds comments and deletes comments

Note that the parameter passed here is state and action let
postcomments = (state = [], action) + = {
    switch (action.type) {case
        "add_ COMMENT ":
            return [
                ... state,//original state
                {
                    user:action.author, increased state
                    Text:action.text
                }
            ];
        Case "Remove_comment":
            return [
                ... state.slice (0,action.i),  //reject the one that needs to be deleted in the array ...
                state.slice ( ACTION.I + 1)
            ];
        Default:
            return state;
    }
};

In our project, we may write multiple reducer files in modules and functions, but in the end we need to merge them into one, which requires the use of combinereducers in Redex

Import {combinereducers} from "Redux";
Import * as Reducers from "./reducers"
Const Rootreducer = combinereducers ({
    ... reducers
});
Export default rootreducer;

This is a common use, and in my study of the video, he also added Routerreducer in combinereducers, its specific role can be seen in the official document React-router-redux, anyway, I do not understand how to read, The specific role of the feeling is that when you switch the page will be more than a location_change time, can be used to track changes in the page, specifically to use the words need to change 3 files, the above merge reducers file, After introducing the Routerreducer method of the React-router-redux library, add the following code to store.js in Combinereducers routing:routerreducer

...
Import {Synchistorywithstore} from ' React-router-redux ';
Import {browserhistory} from ' React-router ';
...
Export Const HISTORY = Synchistorywithstore (Browserhistory, store);

3. The <Router> Root Routing tab in the main portal file uses the history exported in Store.js

<router history={history}> ...
<Router>

Action

Action I do it is an interface, it is mainly linked with reducer, it must return a type by default, with the value of this type to determine which step in reducer
For example: I need to add a comment, that I need to pass the comment on the ID of the article, comment on the user, comment on the content, so define as follows

Add Comment
export let addcomment = (PostID, author, text) = = {
    return {
        type: ' Add_comment ',
        PostID ,
        author,
        text
    }
};

Integrated Store,reducer,actionOur store has been introduced in the provider, but we provider within the components can not be used directly, to use must be connect components, this aspect of the react practice experience: React-redux Connect Method in detail This article contains detailed instructions store.js inside we have reducer and store data instantiation, will create a few of the store's default methods Dispatch (), getState (), subscribe () Missing 1, Is that the component is able to call the data in the store; 2. The dispatch function provided by the store sends the action to Reducer,reducer to process the data through a switch function, reducer provides the data to the store, updates the state, Component Auto Refresh

These unresolved issues are solved with connect ([Mapstatetoprops], [Mapdispatchtoprops], [Mergeprops], [options]), where we only use the first and second parameters

Import {bindactioncreators} from ' Redux ';
Import {Connect} from ' React-redux ';

The state passed in here is the defaultstate let Mapstatetoprops in store
= (state) = {
    return{
        posts:state.posts,
        Comments:state.comments
    }
};

The actioncreators here is the simple action file
//redux itself provides a bindactioncreators function that wraps the action into a directly callable function let
Mapdispatchtoprops = (Dispatch) = {
    return bindactioncreators (Actioncreators, dispatch);
};

Finally call the Connect ()
Const APP = connect (Mapstatetoprops, Mapdispatchtoprops) (Main);
Export default App;

Supplement using Redux-dev-tools

The debug tool to use Redux requires a third parameter in the CreateStore () step in the Store.js file, enhancers

Import {createstore, compose} from ' Redux ';
Redux-dev-tools
Const Enhancers = compose (
    window.devtoolsextension? Window.devtoolsextension (): F = f< c3/>);

Const STORE = CreateStore (Rootreducer, defaultstate, enhancers);

enable instant refresh of pages after changing reducer

Webpack can listen to our component changes and make an immediate response, but can't listen to reducers changes, so add code in Store.js

The accepts parameter here is the reducers's storage path, and the path within require () is the file
if (module.hot) {module.hot.accept (") that executes Combinereducers ()
    . /reducers/", () = {
        Const Nextrootreducer = require ('./reducers/index '). Default;
        Store.replacereducer (Nextrootreducer);
    })
}

Summary

After a review, feel more than before only see this screen to understand more deeply, although there will be some can not digest, but the basic process is clear a lot, feel sure to Nanyi Teacher's blog post point out the use of react is very convenient, but Redux is not necessarily to choose to use, Because it still has a certain degree of difficulty and complexity, especially its own business logic is not much, when the program is not big

Here are some of the other great articles on introducing Redux and react.
React Redux Action Flow