Redux Top API

对于Redux 本身,它只有很小的一个 API. Redux 定义了一个系列的约定, 帮助你来实现(reducer)和提供一些帮助类函数来绑定这些约定. 这里说说 redux 考虑的 state. 你可以通过 react-redux 绑定的 UI.

顶层Exports

• createStore(reducer, [preloadedState])

Creates a Redux store that holds the complete state tree of your app.
There should only be a single store in your app.

import { createStore } from 'redux'

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([ action.text ])
    default:
      return state
  }
}

let store = createStore(todos, [ 'Use Redux' ])

store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]

---

createStore(reducer, [preloadedState], [enhancer])

Creates a Redux store that holds the complete state tree of your app.

There should only be a single store in your app.

Arguments

• reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle.

• [preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand. 初始化的状态,

• [enhancer] (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware(). store 的加强器, 你可以想要通过它来加强 store, 通过使用第三方的兼容中间件,如时间旅行,持久化等.redux 只提供一个加强 store 的方式就是 applyMiddleware.

---

• combineReducers(reducers)

随着程序的变大,需要分出很多的 reducer 来分片管理 redux app 是 state. 这个 combineReducers()帮助函数会将不同值收集到一个地方通过 createStore. 结果的 reducer 会把所有的子 reducer 的结果汇一起然后把放在一个 state 里.

• applyMiddleware(...middlewares)

Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.

• bindActionCreators(actionCreators, dispatch)

• compose(...functions)

Composes functions from right to left. This is a functional programming utility, and is included in Redux as a convenience.

Store 接口方法

Store

保留当前 redux app 的整个状态

• getState()

返回当前最新的状态树, 相当于 reducer 最后返回的结果.

• dispatch(action)

触发一个动作, 这也将是唯一一处可以修改当然 redux app 的状态.

• subscribe(listener)

它将会追加一个修改监听,如果任何一个动作被分发 dispatch, 那么都将会触发它. 包括状态树里的任何部分被修改.而且在 callback 里还可以通过调用 getState() 方法来取到当前最新的 state 状态.

• replaceReducer(nextReducer)

Replaces the reducer currently used by the store to calculate the state.

使用方法

你可以通过下面的方式来使用:

//es6

import { createStore } from 'redux'

//ES5 CommonJS
var createStore = require('redux').createStore

//ES5 UMD_build
var createStore = Redux.createStore