redux学习记录

1.在store文件夹下的index.js中创建store:

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

const store = createStore(reducer)

export default store

2.在store文件夹下的reducer文件下的voteReducer.js创建

// 初始化状态的值
// 每个REDUCER都管理自己单独的状态
import * as TYPES from './action-types'

// 初始化状态的值
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;

  }
}
//action时一个对象{type: XXX} 必须保证行为标识符type的存在,根据不同的type，修改不同的状态

如果存在多个ruducer，必须要在store文件夹下的reducer文件下index.js中合并reducer,假设在reducer文件夹下还存在另一个personalreducer

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

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

合并之后的状态：

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

所以以后取值应该为store.getState().vote.supNum,加上模块名

3.在store文件夹下的action_types.js创建中

// 派发行为统一标识管理
export const VOTE_CHANGE_SUPNUM = "VOTE_CHANGE_SUPNUM" 
export const VOTE_CHANGE_OPPNUM = "VOTE_CHANGE_OPPNUM" 

4.在store文件夹下的action文件下的voteAction.js创建

// 存储当前板块需要派发行为的ACTIOON对象

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

如果存在多个ruducer，必须要在store文件夹下的action文件下index.js中合并action对象,假设在action文件夹下还存在另一个personalaction

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

export default {
  vote: voteAction,
  personal: personalAction
}

之后要拿的话必须是action.Vote.changeSupNUm

至此state文件夹的构建已经完成,之后在你用到的地方导入state，

在index.js文件中使用state

import state from './state/index'

在组件中需要用到state时，可以当成属性传递给各个组件，

再订阅状态更改的时候用来重新渲染组件的方法通过

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

要想改变状态的值，就通过下面的代码

import actions from './store/actions/index'
let store = props.store;
//给一个触发条件，然后利用store中的dispatch方法，放入一个派发行为标识符，然后通过管家函数
reducer来对公共状态做出更改，最新的状态更改后会通过调用时间池中已经被订阅的函数，一般改函数都是
触发组件重新渲染的函数，然后组件可以拿到最新的公共状态的值
onclick={ev => {
store.dispatch(actions.vote.changeSupNum());
}}