1. Create store in index.js under store:

import {
  createStore
} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store
Copy the code

2. Create votereducer.js in the reducer file in the Store folder

// Each REDUCER manages its own state import * as TYPES from './action-types' // Init state const initalState = {supNum: 10, oppNum: 5 } export default function voteReducer(state = initalState, action){ state = JSON.parse(JSON.stringify(state)); switch(action.type) { case TYPES.VOTE_CHANGE_SUPNUM: state.supNum++; break; case TYPES.VOTE_CHANGE_OPPNUM: state.oppNum++; break; }} // an object {type: XXX} must ensure the existence of the behavior identifier type, according to the different type, modify the different stateCopy the code

If there are multiple Ruducers, the reducer must be merged in the Reducer file index.js under the Store folder, assuming that there is another personalReducer under the Reducer folder

import {combineReducers} from 'redux'
import VoteREducer from './VoteREducer'
import personalReducer from './personalReducer'

export default combineReducers({
  vote:voteReducer,
  personal: personalReducer
});
Copy the code

State after merge:

{
  vote: {
    supNum: 10,
    oppNum:5,
  }
  personal: {
    supNUm: 0,
    info: {}
  }
}
Copy the code

So the value should be store.getState().vote.supnum, plus the module name

3. Create action_types.js in the store folder

// Unified identification management of distribution behaviors Export const VOTE_CHANGE_SUPNUM = "VOTE_CHANGE_SUPNUM" export const VOTE_CHANGE_OPPNUM = "VOTE_CHANGE_OPPNUM"Copy the code

4. Create voteaction.js in the action file in the Store folder

Import * as from '.. /action-types'; import {dispatch} from '' export default { changeSupNum() { return { type: TYPES.VOTE_CHANGE_SUPNUM }; }, changeOppNum() { return { type: TYPES.VOTE_CHANGE_SUPNUM }; }};Copy the code

If there are multiple Ruducers, you must merge the action objects in the index.js action file in the Store folder, assuming that there is another personalAction in the Action folder

import VoteAction from './VoteAction'
import personalAction from './personalAction'

export default {
  vote: voteAction,
  personal: personalAction
}
Copy the code

It must be action.vote.changesupnum

Now that you’ve built the state folder, import the state where you need it,

Use state in the index.js file

import state from './state/index'
Copy the code

When state is needed in a component, it can be passed to individual components as an attribute,

The method used to rerender the component passes when the subscription state changes

this.props.store.subscribe(() => {
	this.setState({
    	this.props.store.getState().vote
    })
});
Copy the code

To change the value of the state, use the following code

import actions from './store/actions/index' let store = props.store; // Give a trigger condition, and then use the dispatch method in the store to add a dispatch behavior identifier, and then make changes to the public state through the reducer manager function. The latest state changes will be made by calling the subscribed functions in the time pool. Generally, these changes are functions that trigger the re-rendering of components. Then the value of the component can get the latest state of the public onclick = = > {{ev store. Dispatch (actions. Vote. ChangeSupNum ()); }}Copy the code