React learning (5) Redux

For the demo directly made here, the Action is still unclear.
First , I will summarize the general process:

first understand that the translation of store means the meaning of a warehouse. Secondly, we derive createStore from redux, and then introduce the reducer. Remember the picture above, imagine it as In libraries, when looking for books, you need to go to the administrator reducer to get the data. The role of the reducer is to expose a method to return your state, because the reducer manages the state.



This is the output of store.getState().

I want to use the redux plugin to go. See need to add this sentence

const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

OKOKOKOKOKOKOKOKOK, I just watched the technical fat video of station b, and I was stunned when he finished talking. . . . Just do it directly, and rarely say why. . No way, I guess! I like doing this best.

Be a little sticky, go through the process again, I don’t believe it

First add an onChange event to the input, let him get the value of each input, here we carry out the first step Action of the flowchart, we give the action a name, which is equivalent to the key, find it when it is called, and then put it The required value is passed, why, because our overall purpose is to read it out from the warehouse, and then display it. At this time, we must first push the action through store.dispatch, and the push will be triggered every time the value changes.

(Here is reducer). There are two parameters here, state and action. State has default values. The operation here is that if a value is entered in the input box of the component, I will push the action in. If the type meets the requirements, I will Assign the value entered by the keyboard to the value I want to display, newstate.inputValue, and then return the newState (actually it feels like state, but the cloned step here, I checked it out, in order to keep the history of each change, there are many One way)

This is the content of the action

ok. Let’s go back to the component. The newState returned just now is in the store. At this point, let’s think about which line is left. Only store points to the component. Let’s To update the state of the component by subscribing in the component (because we subscribed once when we initialized), as follows:

When the value returned by our store from the reducer changes, then we trigger the storeChange function, Of course, this is defined by ourselves, and its name is also very good, concise and clear, at

this point, we finally sorted out. . . . I miss vuex a bit, but if I use switch, I feel that react is quite suitable for large-scale projects. If you develop together, you can get everything you need from here. It feels like pushing, taking, and updating the state of the component. Keep working hard. !

Add an add event

    add = () => {
    
    
        const action = {
    
    
            type:'addItem',
        }
        store.dispatch(action)
    }

export default (state = defaultState, action) => {
    
    
    console.log(state, action)
    //Reducer里只能接受state，不能改变state
    if(action.type === 'changeInput'){
    
    
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if(action.type === 'addItem'){
    
    
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    return state
}

Ok, the last one.
What needs to be noted here is that the parameters cannot be passed directly, it will be called immediately after passing directly. Use bind to fix this.