action - 如何使用参数调用 redux 操作并从 reducer 访问？

Question

如何调用 设置计数器 使用 操作值(value) 来自我组件的渲染函数的参数？

你如何在 reducer 中访问 Action 的参数？

// File: app/actions/counterActions.js
export function setCounter(value) {
  return {
    type: types.SETCOUNTER,
    value
  };
}
export function increment() {
  return {
    type: types.INCREMENT
  };
}
export function decrement() {
  return {
    type: types.DECREMENT
  };
}

如何在 reducer 中检索 action 参数？

// File: app/reducers/counter.js
export default function counter(state = initialState, action = {}) {
  switch (action.type) {
    case types.INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };
    case types.DECREMENT:
      return {
        ...state,
        count: state.count - 1
      };
    case types.SETCOUNTER:
      return {
        ...state,
        count: value /* How do I access an action argument ?? */
      };
    default:
      return state;
  }
}

如何将参数传递给 setCounter 操作？

File: app/components/counter.js
export default class Counter extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { counter, increment, decrement, setCounter } = this.props;

    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Count:{counter}</Text>
        <TouchableOpacity onPress={setCounter(99)} style={styles.button}>
          <Text>Reset to 99</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={increment} style={styles.button}>
          <Text>up</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={decrement} style={styles.button}>
          <Text>down</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

我正在使用这个反例学习 react-native redux:
https://github.com/alinz/example-react-native-redux

这个应用程序有两个按钮；在计数器上调用操作的增量和减量，并且计数器值重新呈现。

我想将第三个按钮添加到 setCounter 到任意值。

提前致谢，

-埃德
javascript, react-native, redux 新手

我不理解在我的 View 组件渲染函数中调用 setCounter(value) 的 javascript 语法？

{setCounter(99)} 不起作用？

使成为() {
const { 计数器，递增，递减，setCounter } = this.props;

return (
  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Count:{counter}</Text>
    <TouchableOpacity onPress={setCounter(99)} style={styles.button}>
      <Text>Reset to 99</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={increment} style={styles.button}>
      <Text>up</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={decrement} style={styles.button}>
      <Text>down</Text>
    </TouchableOpacity>
  </View>
);

}

Answer 1

在您的 Action 创建器中添加 value Action 对象:

// File: app/actions/counterActions.js
export function setCounter(value) {
  return {
    type: types.SETCOUNTER,
    value // it will add key `value` with argument value. 
  };
}

所以，你可以通过这个键在 reducer 中访问这个值，比如:

case types.SETCOUNTER:
  return {
    ...state,
    count: action.value
  };