1. createStore(reducer, [initState, enhancer])
- 作用：创建一个Redux store来存放应用中所有的state，一个应用只能有个store。函数返回store对象。
- 参数：
- reducer(Function)：两个参数：state和action，返回一个state。 不要对参数state进行修改，需要返回一个新的对象。
- initStatate：初始state。如果不为空，需要和reducer中处理的state结构一致
- enhancer：一个中间件，如logger等。
例如：
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import api from '../middleware/api'
import rootReducer from '../reducers'
import DevTools from '../containers/DevTools'
export default function configureStore(preloadedState) {
const store = createStore(
rootReducer,
preloadedState,
compose(
applyMiddleware(thunk, api, createLogger()),
DevTools.instrument()
)
)
return store
}
2. Store
Store是用来维持应用所有state树的一个对象。改变state的唯一方法是store dispatch一个action。
Store不是类，而只是一个有几个方法的对象，可以采用createStore进行创建。
- getState()
返回应用当前的 state 树。它与 store 的最后一个 reducer 返回值相同。 - dispatch(action)
分发action，这是改变state的唯一方法。 - subscribe(listener)
添加一个变化监听器，每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。函数返回一个解绑的函数。可以参考counter-vanilla - replaceReducer(nextReducer)
替换Reducer，用处较少。
// 渲染和订阅渲染
function render() {
valueEl.innerHTML = store.getState().toString()
}
store.subscribe(render)
3. combineReducers(reducers)
combineReducers辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore。
多个子reducer函数合并后，相当于整体函数会为state特定字段进行映射产生特定的reducer函数。 如页面中的例子；todos和counter只会处理对应字段过来的action。
4. applyMiddleware(...middlewares)
输入一个middlewares数组，返回一个函数，函数以createStore为参数：
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
使用示例：
import { createStore, applyMiddleware } from 'redux'
import todos from './reducers'
function logger({ getState }) {
return (next) => (action) => {
console.log('will dispatch', action)
// 调用 middleware 链中下一个 middleware 的 dispatch。
let returnValue = next(action)
console.log('state after dispatch', getState())
// 一般会是 action 本身，除非
// 后面的 middleware 修改了它。
return returnValue
}
}
let createStoreWithMiddleware = applyMiddleware(logger)(createStore)
let store = createStoreWithMiddleware(todos, [ 'Use Redux' ])
每个 middleware 接受 Store
的 dispatch
和 getState
函数作为命名参数，并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数，这个函数可以直接调用next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch
方法作为 next 参数，并借此结束调用链。所以，middleware 的函数签名是 ({ getState, dispatch }) => next => action。
5. bindActionCreators(actionCreators,dispatch)
经过bindActionCreators处理的actions，直接调用函数就相当于进行了dispatch，因而实现了不调用dispatch即可触发state的改变。
使用场景： 当你需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 Redux store 或 dispatch
传给它。
// app.js
import { selectReddit } from '../actions'
...
class App extends Component {
render() {
const { selectedReddit, posts, isFetching, lastUpdated, dispatch } = this.props
let boundActionCreators = bindActionCreators({selectReddit}, dispatch);
return (
<div>
<Picker value={selectedReddit}
onChange={this.handleChange}
{...boundActionCreators}
options={[ 'reactjs', 'frontend' ]} />
</div>
)
}
}
export default connect(mapStateToProps)(App)
// picker.js
export default class Picker extends Component {
render() {
const { value, onChange, options, selectReddit } = this.props
console.log(this.props)
return (
<span>
<h1>{value}</h1>
<select onChange={e => selectReddit(e.target.value)}
value={value}>
{options.map(option =>
<option value={option} key={option}>
{option}
</option>)
}
</select>
</span>
)
}
}
可以参考文章。
6. compose(...functions)
从右到左来组合多个函数。
这是函数式编程中的方法，为了方便，被放到了 Redux 里。 当需要把多个 store 增强器 依次执行的时候，需要用到它。
参考文章：文章
7. <Provider store>和connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])
<Provider store>使组件层级中的 connect()方法都能够获得 Redux store。正常情况下，你的根组件应该嵌套在 <Provider>中才能使用 connect()方法。
ReactDOM.render(
<Provider store={store}>
<MyRootComponent />
</Provider>,
rootEl
);
connect： 连接 React 组件与 Redux store。
// mapStateToProps: 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的？
function mapStateToProps(state) {
return {
todos: state.todos
}
}
// mapDispatchToProps: 哪些 action 创建函数是我们想要通过 props 获取的？
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(TodoActions, dispatch)
}
}
mergeProps和options： 再议
网友评论