Redux在React中最佳实践方法

如题,标题很夸张,我想说的是,这篇文章我绝对是吹牛批的!

Redux大家都用过吧,它是一个javascript 状态容器,和React没有关系,也不是Facebook出品的。目前大部分人都是用在React上面的。那么本文咱们就来介绍下ReudxReact中的最佳实践方法(至少我认为是最佳)

Redux解决了React什么问题

简单点说:

就是组件间状态共享问题。

复杂点说:

由于React只是一个视图层的库,所以其他的不是它的强项,管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。所以这时候我们需要Redux

管理和维护

开发的时候你需要考虑以后的管理和维护,而state又不断变化的,当项目变大后,一不小心就会变得很难以维护了,所以我们要在开发的时候就做好,不要等开发完了,那就没得意思了!

以下是我目录示例:

可以看到,我是将store放到页面(组件)的文件下,有人会问了,什么鬼。下面一一解释,这也是本文的核心内容。

实践

大致分为一下几步
– 各自组件中定义各自的reducers、actions
– combineReducers拆分reducers
– 合并总的reducers

如上图所示,把每个组件需要的reducers、actions等各自归纳到组件文件夹下,这样就明确了。其次,在总的reducers文件中通过combineReducers拆分reducers

import {combineReducers} from 'redux'
import {reducer as homeReducer} from '../page/home/store'
import {reducer as detailReducer} from '../page/detail/store'
import {reducer as searchReducer} from '../page/search/store/index'
const reducer = combineReducers({
    home: homeReducer,
    detail: detailReducer,
    search: searchReducer
});
export default reducer

然后在store中合并总的reducers,在导出store

至于在组件内怎么用,那是该怎么用就怎么用,这里只是说一种比较好的方法,让你更加容易的管理自己的状态!

ps:很多人总是一股脑的,把所有的状态放进redux里面,其实说老实话,这种方式,我个人不太喜欢,我会把一些需要单独提出来的state放进去,而一些不要共享,或者很简单的数据,我会放在组件中!