如何在react中用redux组织store？

Question

如题，可以这样组织吗？rootReducer用combineReducer方法combine reducer1和reducer2，然后reducer1又是用combineReducer方法combine reducer3和reducer4......可以这样不断用combineReducer层层嵌的吗？还是说只能有一个combineReducer方法的？另外是不是所有的状态管理都由redux来做？还是说有些其实是可以由组件内的state来做的？应该怎么安排取舍？

总之想要了解的是如何在react中用redux组织状态树？有没有最佳实践？状态树应该如何嵌套和平行？如果有这方面的文章也可以推荐一下。

其实状态树应该是扁平的，还是说应该是嵌套的啊，菜鸟一个，刚学redux，对这些很疑惑

Answer 1

rootReducer用combineReducer方法combine reducer1和reducer2，然后reducer1又是用combineReducer方法combine reducer3和reducer4......可以这样不断用combineReducer层层嵌的吗？还是说只能有一个combineReducer方法的？

combineReducer方法是在创建store前用的方法，目的是合并多个不同的reducer，接著经过createStore(reducer)创建store后，store中的数据结构就会确立了。你可以把reducer视为如何更动store中数据所用的方法，这个过程只是个初始化store的两个步骤，层层嵌没有太大意义，按理说一个应用中只会用一个combineReducer，因为也只会用单一个store控管整体应用。

另外是不是所有的状态管理都由redux来做？还是说有些其实是可以由组件内的state来做的？应该怎么安排取舍？

所有状态管理由Redux作，组件内的state可以不用。不用安排，就这样作就可以了，你对于state可能不太理解，state的行为是可能异步的，它在某些情况下得到的结果不如你所想像，它能控管的状态也是有限制的。参考我写的文章:
为何说setState方法是异步的？

总之想要了解的是如何在react中用redux组织状态树？有没有最佳实践？状态树应该如何嵌套和平行？如果有这方面的文章也可以推荐一下。

Redux状态树看需求，每种应用都不一样，实际上就是把之前应用中各组件的会用到的state，统统放到里面区分不同的组件使用这样。你会用React的state自然就会组织Redux的状态树，嵌套、深层或复杂的结构可以加用immutable.js可以方便处理与提升性能，这属高级部份了。官网资讯很多不妨先看看，应该也有中译本。

Answer 2

现在的程序员呢，如果你跟他说是自己总结的经验，他就会说怎么和官方文档不一样啊，怀疑你的方法是错的。

那么我只好拿redux官方文档的demo来讲解了。

1、有2个或多个reducer

reducer1

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

reducer2

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

store

import { combineReducers } from 'redux'
import reducer1 from './reducer1'
import reducer2 from './reducer2'

export default combineReducers({
  reducer1,
  reducer2
})

也就是说一个应用只有一个store，可以有很多个reducer，这些reducer用combineReducers组合成一个store，看起来他们应该是这样一个数据结构。

store : {
    reducer1 : {},
    reducer2: {}
    ...
}

so，最好不要在reducer里面嵌套你的另外一个reducer，因为这样写会增加复杂度，导致reducer不好掌控。

最后附上官方文档相关介绍：http://redux.js.org/docs/api/...

Answer 3

给你一个我自己的小demo看看，相信你会看懂的
https://github.com/jeremyChen...

Answer 4

1. 可以combineReducer嵌套官方exapmle shopping-cart， reducers/index.js和reducers/products.js

2. state，尽量扁平，具体看需求吧。可参考 http://redux.js.org/docs/faq/...