创建store存放应用中的state

637 阅读1分钟

定义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>