一、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));