React ---- Redux learning Summary

Redux:

Redux is an advanced version of flux, which is more convenient than flux. It encapsulates some flux methods to quickly complete data interaction.

1. Use Cases
Large projects
Multi-module and multi-data
2. Install CNPM install Redux -- save-Dev
3. workflow:
When the component needs to change the store data, it needs to create an action first and send the action to the store through dispatch. Store will forward the action to Cer, combine data (previusstate and state) within CER, and then generate a new data structure and pass it to the store. The view changes accordingly.
4. Code operation process
1. Create a store

Import {createstore} from 'redux '/* There is a createstore method in Redux */import into CERs from '... 'const store = createstore (container CERs) Export default store/* introduce store */import store from '.... 'constructor () {super () This. state = store. getstate}

Print the store

 

You can see that the store contains

(1) Dispatch: used to pass action (2), getstate: the return value is equivalent to this. state data, which contains public data (3), replacereducer :( 4), Subscribe: Listen for data changes, must pass a function (5), symbol (observable ):

2. Create external CERs

Officially, CER: reducer is just a pure function that receives the previous state and action and returns a new state. At the beginning, you can have only one reducer. As the application grows, you can split it into multiple small reducers and operate different parts of the State Tree independently, because CER is only a function, you can control the order in which they are called, pass in additional data, and even write reusable reducers to process some common tasks, such as the page splitter. Three Principles 1. There must be an initial data defaultstate 2. Pure functions must be returned (input is certain, and output is certain) 3. The State is read-only and cannot be directly modified. The only way to change the state is to trigger action. Action is a common object used to describe an event.

         
 const defaultState = {
                    inputVal:‘‘,
                    list:‘‘ }
                export default (state=defaultState,action)=>{
           /*

This function has two parameters: State and action. State refers to the data action in the store. It refers to the action passed when the view modifies the data.

   */ switch (action.type) { case ‘CHANGE_ITEM‘:
                            const changState = JSON.parse(JSON.stringify(state))
                            changState.inoutVal=action.val return changState break; default: return state
                    }
                }

3. Create an action

 

cosnt action = {
      type:‘CHANGE_ITEM‘，
      value：‘’          
}

 

Use store. Dispatch (action) to pass the action to reducers for data updates.

 

4. Update Data in components

Store.subscribe(this.hangdleChangeUpadata.bind(this))    


hangdleChangeUpadata(){ this.setState(Store.getState)                
}

 

 

 

React ---- Redux learning Summary