Store

Redux 应用只有一个单一的store

概念

  1. Store就是一个维护应用程序状态的对象

  2. 提供提供getState()方法获取state

  1. store.getState(): 获取最近的内部状态对象
  3.  - 返回应用当前的 state 树
  4.  - 它与 store 的最后一个 reducer 返回值相同
  1. 提供dispatch(action)方法更新state
  1. store.dispatch(action): 将一个`action`对象发送给 reducer
  3.  - 分发 action 这是触发 state 变化的惟一途径。
  4.  - 会使当前getState的结果和传入的action以同步方式调用reduce函数
  5.  - 返回值会被作为下一个state
  6.  - 从现在开始，这就成为了 getState() 的返回值
  7.  - 同时变化监听器(change listener)会被触发

  1. 通过subscribe(listener)注册监听器

  2. 通过subscribe(listener)返回的函数注销监听器

创建store

  1. 创建src下的store.js文件
  1. [项目文件夹] -> src -> store.js
  1. 导入 Redux 的createStore函数
  1. import { createStore } from 'redux'
  1. 通过 Reducer 函数，构造 Store 对象，导入reducers
  1. import rootReducer from './reducers/'
  1. 导出 Store 对象
  1. let store = createStore(rootReducer)
  3. export default store
  1. 在父组件内引用

<Provider store>使组件层级中的connect()方法都能够获得 Redux store

  • 正常情况下，你的根组件应该嵌套在<Provider>中才能使用connect()方法
  1. import store from './store'
  2. //导入 store
  3. import { Provider } from 'react-redux'
  4. //导入 Provider
  6. Render(){
  7.   <Provider store={store}>
  8.   //将 store 传入
  9.     <组件 />  
  10.   </provider>
  11. }
  • 如果你真的不想把根组件嵌套在 <Provider> 中，你可以把 store 作为 props 传递到每一个被 connet() 包装的组件，但是我们只推荐您在单元测试中对 store 进行伪造 (stub) 或者在非完全基于 React 的代码中才这样做。正常情况下，你应该使用 。

属性

store (Redux Store): 应用程序中唯一的 Redux store 对象children (ReactElement) 组件层级的根组件。