Redux入门-第一篇

import { createStore, combineReducers } from 'redux';

/**

@redux数据的初始化和基础修改

**/

//数据

const options = { name: '小明', age: 18, qian: 9999 };

// 操作类型-添加

const addQian = (arg) => {

  return {

    type: 'ADD',

    payload: arg

  };

};

// 操作类型-减少

const reduceQian = (arg) => {

  return {

    type: 'REDUCE',

    payload: arg

  };

};

//操作的钩子函数

const callbackFn = (state, action) => {

  switch (action.type) {

    case 'ADD': {

      state.qian = state.qian + action.payload;

      return state;

    }

    case 'REDUCE': {

      state.qian = state.qian + action.payload;

      return state;

    }

    default:

      return state;

  }

};

// reducer 是用于构造redux存储区的传入参数

const reducer = (state = options, action) => {

  return callbackFn(state, action);

};

// 构造redux存储区,单个reducer直接使用createStore构造

const store = createStore(reducer);

//执行操作改变

store.dispatch(addQian(66));

console.log('添加后', store.getState());

store.dispatch(reduceQian(88));

console.log('减少后', store.getState());

// 思路梳理: addQian得到一个action ,传入store.dispatch()里,触发store的reducer,在调用钩子函数callbackFn更新state,store.getState()用于获取state数据

/**

@redux多个reducer的处理

**/

//多个reducer的时候使用combineReducers进行处理后再用createStore构造

const reducer1 = (state = {}, action) => {

  return state;

};

const reducer2 = (state = [], action) => {

  return state;

};

const reducerList = {

  reducer1,

  reducer2

};

const list = combineReducers(reducerList);

const store2 = createStore(list);

console.log(store2.getState());

发表评论

电子邮件地址不会被公开。 必填项已用*标注