被 props 调用后未将操作分派给减速器答案

【问题标题】：Actions not being dispatched to reducers after being called by the props被 props 调用后未将操作分派给减速器
【发布时间】：2019-08-29 08:32:13
【问题描述】：

我是 redux 的新手，正在尝试制作一个简单的 react-native 应用。

Actions 被映射到 props (mapDispatchToProps) 但它们没有被分派到 reducer。当我在 Action Creators 中执行 console.log() 时，它们会被调用，但是当我在 CounterReducer 中执行 console.log() 时，它们不会被调用。

App.js

class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
        <HomeScreen />
      </Provider>
    );
  }
}

export default App;

HomeScreen.js

class HomeScreen extends React.Component {
  incrementCounter = () => {
    this.props.incrementCounter();
  };

  render() {
    return (
      <View style={styles.mainContainer}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>{this.props.counter}</Text>
        <Button title="Click me " onPress={this.incrementCounter} />
        <Button
          title="Create Counter"
          onPress={() => {
            this.props.createCounter(5);
          }}
        />
      </View>
    );
  }
}

const mapStateToProps = state => ({
  counter: state.counter
});

const mapDispatchToProps = dispatch => ({
  incrementCounter: incrementCounter,
  createCounter: createCounter
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HomeScreen);

store.js


const reducers = combineReducers({
    counterReducer
})

const store = createStore(reducers)

export default store;

counterReducer.js


const counterReducer = (state = {}, action) => {
  switch (action.type) {
    case actionTypes.CREATE_COUNTER:
      state.counter = action.payload;
      return { ...state };
    case actionTypes.INCREMENT_COUNTER:
      state.counter++;
      return { ...state };
    default:
      return { ...state };
  }
};

export default counterReducer;

actions.js

export const actionTypes = {
    INCREMENT_COUNTER: "INCREMENT_COUNTER",
    CREATE_COUNTER: "CREATE_COUNTER",
}

export const incrementCounter = () => {
  return {
    type: actionTypes.INCREMENT_COUNTER
  };
};

export const createCounter = value => ({
  type: actionTypes.CREATE_COUNTER,
  payload: value
});

我曾尝试在 HomeScreen 中执行此操作，但它给了我一个错误，即操作必须是普通对象并使用中间件进行异步操作，即使我没有任何异步操作。


const mapDispatchToProps = dispatch => ({
  incrementCounter: () => dispatch(incrementCounter),
  createCounter: () => dispatch(createCounter)
});

【问题讨论】：

标签： react-native redux react-redux

【解决方案1】：

您可以通过多种方式修改您的mapDispatchToProps 来解决此问题。最简单的就是传递一个普通的对象：

const mapDispatchToProps = {
  incrementCounter: incrementCounter,
  createCounter: createCounter
};

React-redux 会自动将动作创建者绑定到dispatch。

要使用其他方法，您必须像这样在调度内调用动作创建者：

const mapDispatchToProps = dispatch => ({
  incrementCounter: () => dispatch(incrementCounter()),
  createCounter: () => dispatch(createCounter())
});

【讨论】：

【解决方案2】：

你忘了在函数调用结束时添加括号

这样做

const mapDispatchToProps = dispatch => ({
  incrementCounter: () => dispatch(incrementCounter()),
  createCounter: () => dispatch(createCounter())
});

【讨论】：