StackOver记录：如何在function中使用redux

Stackoverflow地址：Accessing redux store inside functions (opens new window)

# 问题描述

项目中需要封装一个函数buttonClick，顾名思义：点击按钮触发buttonClick点击事件，点击后需要修改react-redux生成的store中的state状态。

但是connect只能将state与Class组件链接起来，所以stackoverflow给出的解决方案是通过redux API实现。

# 记录我尝试过的几种失败方案

# 1. 使用`redux API`

// buttonClick.js
// 获取 state
store.getState()

// 更新 state
store.dispatch({type:"updateValue",value:"xxx"})

// 导出给外部使用
export default const buttonClick = ()=>{....}

1
2
3
4
5
6
7
8
9

但是以上使用的过程时发现，store.getState()拿不到store中的最新state。

我分析的原因是：import buttonClick 时，实际上已经执行了一遍了。所以我尝试了下：

<button onClick={
    import('./button.js').then((module)=>{
      module.button()
    })}
/>

1
2
3
4
5

函数运行未报错，但是仍然取不到最新的state

# 2. 使用 `store.subscribe()`

import store from './redux/store.js';

export const buttonClick = function (){
   var newState = store.getState();
   console.log('state changed');
}

store.subscribe(buttonClick)

1
2
3
4
5
6
7
8

但是此种方法在state概念的时候，仍然无法触发。

这个时候我就在想：到底是state变化了，无法触发store.subscribe还是压根state就没有变化呢？

# 目前测试的结果

// buttonClick.js
store.getState() // 无论是懒加载触发，还是使用store.subscribe触发都无法获取最新的state

// 但是在组件中使用connect语法时
// 与mapStateFromProps: 能拿到最新的state
// mapDispatchToProps: 能改变store的reducer中的状态