react-redux中reducer走过的坑

react-redux中reducer走过的坑

redux，众所周知是 基于 Flux 模式的一个状态管理器，可以配合各种框架使用。而react-redux是redux为react量身打造的管理器（重申，redux和react没有关系）

redux有几大核心概念，store，state，action，reducer。

这次着重讲一下reducer，应该说是我在使用react-redux过程中经历过的坑

reducer是一个纯函数，所谓纯函数（具体请百度），大概就是输入唯一，则输出唯一，这么个意思。在redux中，reducer是改变state，触发action提交的唯一方式，它接收两个参数：state和action，state是原始store中的state，触发更改之后就是提交更改前的state，action代表提交行为（type）和payload。

export function updatePath(state = '/', action) {
  switch (action.type) {
    case 'ROUTER_ACTION':
      return action.path
    default:
      return state
  }
}

redux的核心之一在于reducer，上面这个reducer意味着，哪怕action的过程中出错，比如action的type的没有ROUTER_ACTION这个字段，这个reducer则会返回原来的state，这就保证了store中保存的数据的安全。

接下来步入我进入的坑。。。。

都知道，reducer是组件dispatch触发的函数，而项目大了之后，把reducer写在一起必然是不利于维护的，这个时候就有了combineReducers

用法大概如下

import * as routerPatch from './reducers/routerPatch'

import { combineReducers } from 'redux'

console.log(routerPatch)

export default combineReducers({
    ...routerPatch
})

然后store里面创建的时候调用就行了。

import { createStore, applyMiddleware, } from 'redux'

import __state from './__state'

import reducer from './reducer'

import logger from './middleware/logger'

export default createStore(reducer, __state, applyMiddleware(logger))

（这里使用了一个打印日志的middleware，可以忽略）

照理说，应该没问题，然后在react组件里面使用react-redux的高阶组件connect

const mapStateToProps = state => {
  return {
    path: state.path
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onRouterPath: path => {
      dispatch({ type: "ROUTER_ACTION", path: path });
    }
  };
};

Navmenu = connect(
  mapStateToProps,
  mapDispatchToProps
)(Navmenu);

然后刺激的事情来了，运行项目，然后打开控制台，哦不，不用打开控制台

页面都直接挂了
可以看到报错信息大概是props里面的path获取不到，是一个undefined

注释掉相关的代码之后，
打开控制台

可以发现，的确store里面的path获取不到，并且还报了个错，意思是updatePath这个reducer需要一个key进行代替，否则将被忽略。此报错可以注释store的初始值消除，但是path的undefined无法这样子解决，而且这种方式并不是我们想要的方式

这个坑，坑了我好久，最后终于找到了解决办法，应该说是问题所在，只需要改动一个地方即可，那就是将reducer函数的名字更改为和state的名字一样，即

export function path(state = '/', action) {
  switch (action.type) {
    case 'ROUTER_ACTION':
      return action.path
    default:
      return state
  }
}

然后打开控制台，发现正常运行

这个问题所在是我在单位电脑上安装了react-devtools之后才发现的解决办法，算是记录一下，给自己长点记性。
在使用react的过程中还是推荐使用react-devtools。毕竟，可以让你发现坑啊。。。。