定义store,用于存储状态
const store = createStore(reducer, preloadedState, enhancer)
createStore方法的参数:
reducer
reducer为一个函数,接收当前state和触发的action,返回下一个状态。
可使用combineReducers来生成reducer,把多个store创建成一个根store,需保持状态对象的key和combineReducers的key相对应
export default (state = initialState, action) => {
let newState = state;
switch (action.type) {
// 根据唯一标识符key,对newState进行操作
case ACTION_TYPES.KEY1:
....
break;
default:
...
break;
}
return newState;
};
如果第一个参数传入的state是undefined的话,reducer会返回初始state值
preloadedState
preloadedState为最初定义的state,可随意指定
enhancer
enhancer为store的增强器函数,组合成store creator的高阶函数后返回一个新的强化过的store creator,可以指定第三方中间件。
const store = createStore(
combineReducers({actionAndState}),
preloadedState,
compose(applyMiddleware(thunk, fetch))
);
store的注入
定义好state后,在src目录下的index.js文件中,将store传给Provider组件。
provider组件主要包裹在跟组件外层,使内部所有自组件都能拿到state;
import { Provider } from 'react-redux';
<Provider store={store}>
<Entry />
</Provider>