React Native Redux 调度不起作用但没有错误

Question

我似乎无法弄清楚为什么我无法更新计数器，即使我正在调度正确的操作类型并且它们属于 INCREMENT 和 DECREMENT 状态。我尝试传递一个 mapDispatchToProps 并将函数放入该函数中，但我仍然遇到同样的问题，由于某种原因没有更新状态。

索引：

import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {reducer} from './src/reducers/counter';

const store = createStore(reducer);

const Main = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

AppRegistry.registerComponent(appName, () => Main);

应用程序

import {connect} from 'react-redux';

// create a component
class App extends Component {
  increment = () => {
    this.props.dispatch({type: 'INCREMENT'});
  };

  decrement = () => {
    this.props.dispatch({type: 'DECREMENT'});
  };

  render() {
    return (
      <View style={styles.container}>
        <Button onClick={this.increment} title={'Add 1'} />
        <Text>Counter {this.props.count} </Text>
        <Button onClick={this.decrement} title={'Subtract 1'} />
      </View>
    );
  }
}

计数器

const initState = {
  count: 1,
};

export const reducer = (state = initState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
};

Answer 1

这是 React Native 应用程序，对吧？您的错误是您使用onClick 代替Button 而不是onPress。 It works fine now 切换该道具名称后。

Answer 2

需要注意以下几点才能使其正常工作：

1. 将道具 onClick 改为 onPress
2. 在 App 组件中创建一个构造函数，将“this”绑定到递增、递减动作创建函数。像这样：

constructor() {
    super(props)
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
}

1. 最后，连接到 Redux 存储，并在 AlphaDevs 的答案中调度类似的操作

Answer 3

你必须使用connect函数将App组件连接到redux store。

import { connect } from 'react-redux';

// create a component
class App extends Component {
  increment = () => {
    this.props.increment();
  };

  decrement = () => {
    this.props.decrement();
  };

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={this.increment} title={'Add 1'} />
        <Text>Counter {this.props.count} </Text>
        <Button onPress={this.decrement} title={'Subtract 1'} />
      </View>
    );
  }
}
const mapStateToProps = state => ({ count: state.count })
const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);