一、redux基础使用

安装redux redux-thunk

yarn add redux redux-thunk　　　　

三个概念： store reducer action

store createStore创建 getState()获取状态 dispatch(action)触发reducer更新  subscribe(()=>{})监听变化

action 是一个对象，结构是{type: 'ADD', count: 2 ...}　　

reducer 是一个纯函数不该有副作用  有任何数据更新返回新对象   可以使用combineReducers进行合并

import { createStore, combineReducers, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';

const countInitial = {
  count: 0
};
const userInitial = {
  name: 'jason'
};
const ADD = 'ADD';
const UPDATE = 'UPDATE';
// action creater
function add(num) {
  return {
    type: ADD,
    num
  };
}
// 这里的dispatch就是store.dispatch
function asyncAdd(num){
  return (dispatch)=>{
      setTimeout(()=>{
          dispatch(add(num))
      },3000)
  }
}
// reducer函数
function countReducer(state = countInitial, action) {
  console.log(state, action);
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        count: state.count + (action.num || 1)
      }; // 返回一个新的对象必须
    default:
      return state;
  }
}

function userReducer(state = userInitial, action) {
  console.log(state, action);
  switch (action.type) {
    case 'UPDATE':
      return {
        ...state,
        name: action.name
      }; // 返回一个新的对象必须
    default:
      return state;
  }
}
// 合并reducer
const reducers = combineReducers({
  counter: countReducer,
  user: userReducer
});

/**
 * 创建store ，传入reducer initialData 中间件
 */
const store = createStore(
  reducers,
  {
    counter: countInitial,
    user: userInitial
  },
  applyMiddleware(ReduxThunk)
);

store.dispatch(asyncAdd(7));
store.dispatch(add(3));
store.subscribe(() => {
  console.log(store.getState());
});
store.dispatch({ type: UPDATE, name: 'andy' });

export default store;

 

异步的action

import { createStore, combineReducers, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';

// action creater
function add(num) {
  return {
    type: ADD,
    num
  };
}
// 这里的dispatch就是store.dispatch
function asyncAdd(num){
  return (dispatch)=>{
      setTimeout(()=>{
          dispatch(add(num))
      },3000)
  }
}

/**
 * 创建store ，传入reducer initialData 中间件
 */
const store = createStore(
  reducers,
  initalData,
  applyMiddleware(ReduxThunk)
);

store.dispatch(asyncAdd(7));