码迷,mamicode.com
首页 > 其他好文 > 详细

redux

时间:2018-04-30 16:36:38      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:export   返回   其它   cat   作用   拆分   return   pre   tst   

1.combineReducers (reducers)

combineReducers 辅助函数的作用是,把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。

合并后的 reducer 可以调用各个子 reducer,并把它们的结果合并成一个 state 对象。state 对象的结构由传入的多个 reducer 的 key 决定。

最终,state 对象的结构会是这样的:

{
  reducer1: ...
  reducer2: ...
}

通过为传入对象的 reducer 命名不同来控制 state key 的命名。例如,你可以调用 combineReducers({ todos: myTodosReducer, counter: myCounterReducer }) 将 state 结构变为 { todos, counter }。

通常的做法是命名 reducer,然后 state 再去分割那些信息,因此你可以使用 ES6 的简写方法:combineReducers({ counter, todos })。这与 combineReducers({ counter: counter, todos: todos }) 一样。

参数

reducers (Object): 一个对象,它的值(value) 对应不同的 reducer 函数,这些 reducer 函数后面会被合并成一个。下面会介绍传入 reducer 函数需要满足的规则。

返回值

(Function):一个调用 reducers 对象里所有 reducer 的 reducer,并且构造一个与 reducers 对象结构相同的 state 对象。

示例:

reducers/todos.js

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

reducers/counter.js

export default function counter(state = 0, action) {
  switch (action.type) {
  case ‘INCREMENT‘:
    return state + 1
  case ‘DECREMENT‘:
    return state - 1
  default:
    return state
  }
}

reducers/index.js

import { combineReducers } from ‘redux‘
import todos from ‘./todos‘
import counter from ‘./counter‘

export default combineReducers({
  todos,
  counter
})

App.js

import { createStore } from ‘redux‘
import reducer from ‘./reducers/index‘

let store = createStore(reducer)
console.log(store.getState())
// {
//   counter: 0,
//   todos: []
// }

store.dispatch({
  type: ‘ADD_TODO‘,
  text: ‘Use Redux‘
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: [ ‘Use Redux‘ ]
// }

小贴士

(1)本方法只是起辅助作用!你可以自行实现不同功能的 combineReducers,甚至像实现其它函数一样,明确地写一个根 reducer 函数,用它把子 reducer 手动组装成 state 对象。

(2)在 reducer 层级的任何一级都可以调用 combineReducers。并不是一定要在最外层。实际上,你可以把一些复杂的子 reducer 拆分成单独的孙子级 reducer,甚至更多层。

redux

标签:export   返回   其它   cat   作用   拆分   return   pre   tst   

原文地址:https://www.cnblogs.com/crazycode2/p/8973711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!