如何使用参数和reducer访问来调用redux动作？

Question

如何使用组件的渲染函数中的值参数调用setCounter操作？

如何在reducer中访问动作的参数？

// 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的第3个按钮添加到任意值.

提前致谢,

-Ed javascript,react-native,redux newbie

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

{setCounter(99)}不起作用？

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>
);

}

Answer 1

在您的操作创建者中,您要添加value到操作对象:

// 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
  };

Answer 2

我的主要挑战之一是不了解javascript。

这解决了调用问题：

    <TouchableOpacity onPress={() => setCounter(99)} style={styles.button}>
      <Text>Reset to 99</Text>
    </TouchableOpacity>