Redux series 01: learn about action, store and reducer from a simple example

Let’s look at examples first

In fact, the core concept of Redux isstore、action、reducer, from the perspective of calling relationship, it is as follows:

store.dispatch(action) –> reducer(state, action) –> final state

You can first look at the following minimalist examples to have a perceptual understanding. The relationship between the three will be briefly introduced below

//The reducer method has two parameters passed in
//State: current state
//Action: currently triggered action, {type: 'XX'}
//Return value: new state
var reducer = function(state, action){
    switch (action.type) {
        case 'add_todo':
            return state.concat(action.text);
        default:
            return state;
    }
};

//Create a store and pass in two parameters
//Parameter 1: reducer is used to modify state
//Parameter 2 (optional): [], the default state value. If it is not passed, it is undefined
var store = redux.createStore(reducer, []);

//Via store Getstate() can get the state of the current store
//The default value is the second parameter passed in by createstore
console.log('state is: ' + store.getState());  // state is:

//Via store Dispatch (action) to modify the state
//Note: in Redux, the only way to modify state is through store dispatch(action)
store. Dispatch ({type: 'add_todo', text: 'reading'});
//Print out the modified state
console. log('state is: ' + store.getState());  //  State is: Reading

store. Dispatch ({type: 'add_todo', text: 'write'});
console. log('state is: ' + store.getState());  //  State is: Reading,写作

Store, reducer, Action Association

You can combine the above code to see the following explanations

1. Store: students who have an understanding of flux should know something about it. Store here represents the data model, internally maintains a state variable, and use cases describe the state of the application. Store has two core methods, namelygetState、dispatch。 The former is used to obtain the state of the store, and the latter is used to modify the state of the store.

   //Create a store and pass in two parameters
   //Parameter 1: reducer is used to modify state
   //Parameter 2 (optional): [], the default state value. If it is not passed, it is undefined
   var store = redux.createStore(reducer, []);
   
   //Via store Getstate() can get the state of the current store
   //The default value is the second parameter passed in by createstore
   console.log('state is: ' + store.getState());  // state is:
   
   //Via store Dispatch (action) to modify the state
   //Note: in Redux, the only way to modify state is through store dispatch(action)
   store. Dispatch ({type: 'add_todo', text: 'reading'});

2. Action: the abstraction of behavior (such as user behavior), which is a common JS object in redux. Redux has a weak agreement on action. Except for one thing, action must have onetypeField to identify the type of behavior. Therefore, the following are legal actions

   {type: 'add_todo', text: 'reading'}
   {type: 'add_todo', text: 'write'}
   {type: 'add_todo', text: 'sleep', time: 'Night'}

3. Reducer: a common function used to modify the state of the store. Pass in two parameters: state and action. Where, state is the current state (available through store. Getstate()), and action is the currently triggered behavior (triggered through store. Dispatch (action) call). The value returned by reducer (state, action) is the latest state value of the store.

   //The reducer method has two parameters passed in
   //State: current state
   //Action: currently triggered action, {type: 'XX'}
   //Return value: new state
   var reducer = function(state, action){
       switch (action.type) {
           case 'add_todo':
               return state.concat(action.text);
           default:
               return state;
       }
   };

About actionarea

noticexxCreatorIt is always reminiscent of factory mode. Yes, in Redux, actionarea is actually the factory method of action. You can refer to the following examples.

actionCreator(args) => action

var addTodo = function(text){
    return {
        type: 'add_todo',
        text: text
    };
};

Addtodo ('sleep ')// Return: {type: 'add_todo', text: 'sleep'}

In Redux, actionarea is not required. However, it is recommended to use actionarea instead of direct delivery of ordinary action objects. In addition to reducing the amount of code, it can also greatly improve the maintainability of code. Imagine the following scenario and look back at the example at the beginning of the article and the code example after applying actionarea.

store. Dispatch (addtodo ('sleep ');
console. log('state is: ' + store.getState());  //  State is: reading, writing, sleeping

Related links

• Redux Chinese document:http://camsong.github.io/redu…
• Redux English document:http://redux.js.org/index.html
• Redux source code interpretation:https://github.com/chyingp/re…