A, install,

Yarn add redux or NPM install --save-dev reduxCopy the code

2. Create a directory

Create the store folder in the SRC folder, and create the corresponding files in the SRC folder

1. Create the store entry file idex.js

The Store object contains all the data. If you want data at a point in time, take a snapshot of the Store. This collection of data at this point in time is called State.

The current State can be obtained from store.getState().


import { createStore } from 'redux';
import reducer from './reducers/index'
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__redux_devTools_extension__ () -- developer redux-devTools configuration);export default store;
Copy the code

Redux states that one State corresponds to one View. As long as the State is the same, the View is the same. You know what State is, you know what View is, and vice versa, right

To see the change in status values, download the Redux devloos plugin from the Google Plugins market

2.Action

If the State changes, the View changes. However, the user does not touch State, only View. Therefore, the change in State must be caused by the View. An Action is a notification from the View that the State should change.

Action is an object. The type attribute is required and represents the name of the Action. Other attributes can be set freely

Create an actiontypes. js property file for use

Such as:

export const CHANGINPUT = 'CHANGINPUT'
export const ADDBBIMN = 'Add_bbimn'
export const DELEMTITEM = 'DelemtItem'
export const UPDATEINFO = 'UPdateinfo'
Copy the code

3.Action Creator

There are as many actions as there are messages that the View wants to send. If they were all handwritten, it would be troublesome. You can import the Action you just created and create actionactionine.js in the/SRC /store/ Action/directory

import { CHANGINPUT, ADDBBIMN, DELEMTITEM, UPDATEINFO } from "./actionTypes";
export const changInput = (value) = > ({
    type: CHANGINPUT,
    value: value
})
export const addbindCheng = () = > ({
    type: ADDBBIMN,
})
export const deleteItemCheng = (index) = > ({
    type: DELEMTITEM,
    value:index
})
export const updateinfo = (value) = > ({
  type: UPDATEINFO,
  value: value,
});
Copy the code

4.Reducer Updates the data status

When the Store receives the Action, it must give a new State for the View to change. This State calculation process is called Reducer.

Reducer is a function that takes Action and the current State as parameters and returns a new State.

Create the index.js file in/SRC /store/reducers

import { CHANGINPUT, ADDBBIMN, DELEMTITEM ,UPDATEINFO } from ".. /actions/actionTypes"; -- Introduces the Action properties fileconst defaultState = {
  userInfo: {
    username: "Bill".age: 28.sex: "Male",}};export default (state = defaultState, action) => {
  if (action.type === CHANGINPUT) {
    Reducer only accepts state but cannot change state
    let newStade = JSON.parse(JSON.stringify(state));
    newStade.inputValue = action.value;
    return newStade;
  }
  if (action.type === ADDBBIMN) {
    let newStade = JSON.parse(JSON.stringify(state));
    newStade.list.push(newStade.inputValue);
    return newStade;
  }
  if (action.type === DELEMTITEM) {
    let newStade = JSON.parse(JSON.stringify(state));
    newStade.list.splice(action.value, 1);
    return newStade;
  }
  if (action.type === UPDATEINFO){
      let newStade = JSON.parse(JSON.stringify(state));
      newStade.userInfo.username = action.value;
      return newStade;
  }
  return state;
};

Copy the code

5. How to use it

Introduce corresponding files into the page

import store from ".. /.. /.. /store";
import { updateinfo } from ".. /.. /.. /store/actions/actionCreators"; -- I only used the update user information hereCopy the code

For example, I update the user information in the user list