Question

如何使用mapDispachToProps()内部的redux存储，例如在onLogin函数中记录redux状态？

const mapDispachToProps = (dispatch) => {
  return {
    onLogin: (e) => { 
      console.log();
      e.preventDefault();  
    },
    
    onSetValue: (e) => {
      if (e.target.name==="password"){
        dispatch({ type: "Set Password", value: e.target.value })
      } else if (e.target.name==="username") {
        dispatch({ type: "Set User", value: e.target.value })
      }    
    }
  };
};

Answer 1

这里我假设您已经实现了store和redux框架的其他部分。您可以在组件中使用react-redux提供的connect API。如果需要，您还可以阅读此博客，了解react redux https://blog.logrocket.com/react-redux-connect-when-and-how-to-use-it-f2a1edab2013/

import { connect } from 'react-redux';

//Your code

export default connect(mapStateToProps => in your case it will be null, mapDispatchToProps)(Component Name);

Answer 2

mapDispachToProps中没有直接的API可用于访问商店。

如果您需要存储状态来调度操作，则通常使用某种Redux Thunk之类的Redux中间件。 concrete library并不重要，您甚至可以将自己的中间件应用于Redux，其唯一目的是在回调中另外接收状态。重要的是您要将具体的商店实例与UI层分离，以抽象出涉及状态和动作创建的复杂逻辑，并使系统更易于测试。

Redux Thunk的简单示例

您可以返回一个回调函数，作为分派的返回，该分派除了接受getState作为参数之外，还接收dispatch。

const mapDispachToProps = (dispatch) => {
  return {
    ...
    onSetValue: e => dispatch(setPasswordOrUser(e));
  };
};

const setPasswordOrUser = e => (dispatch, getState) => {
  // do something with getState
  if (e.target.name==="password"){
    dispatch({ type: "Set Password", value: e.target.value })
  } else if (e.target.name==="username") {
    dispatch({ type: "Set User", value: e.target.value })
  }    
}

其他方法

替代方法1：直接通过React Context（ReactReduxContext Consumer）接收商店。 React Redux基于Context API，可以通过组件树中的存储向下传递，例如通过ownProps参数传递到mapDispatchToProps。

替代2：像这样将store / state暴露为singleton module export：

// store.js
import { createStore } from 'redux'
let store = createStore(rootReducer)
export const getState = store.getState

// client.js
import { getState } from "./store"

这里最大的缺点是，您将商店实例耦合到React / UI层，很容易混淆架构层职责并在许多代码位置中分配与商店相关的代码。

mapDispatchToProps的全部目的是使dispatch脱离组件。我真的鼓励您使用某种形式的中间件来进行涉及商店状态的动作调度。其他方法也伴随着体系结构成本。

如何访问mapDispachToProps中的redux存储？

2 个答案:

Redux Thunk的简单示例

其他方法