Redux使用

  • 通过reducer新建store,随时通过store.getState获取状态
  • 需要状态变更,store.dispatch(action)来修改状态
  • reducer函数接受stateaction,🔙返回🆕新的state,可以用store.subscribe监听每次修改
index.js
import {createStore} from 'redux'

function counter(state=0,action) {
  switch (action.type) {
    case 'add':
      return state+1;
    case 'reduce':
      return state-1;
    default:
      return 10
  }
}

//新建store
const store = createStore(counter);
const init = store.getState();
console.log(init);

//监听
function listener() {
  const current = store.getState();
  console.log(`现在有的${current}`);
}
store.subscribe(listener)

//派发事件 传递aciton
store.dispatch({type:'add'});
store.dispatch({type:'reduce'});
store.dispatch({type:'add'});
store.dispatch({type:'add'});

Action

action 内必须使用一个字符串类型的type字段来表示将要执行的动作。多数情况下,type会被定义成字符串常量。当应用规模越来越大时,建议使用单独的模块或文件来存放 action

Action创建函数

Action 创建函数就是生成 action 的方法。

// action creator

export function add() {
  return {type:ADD};
};
export function reduce() {
  return {type:REDUCE};
};

results matching ""

    No results matching ""