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

Question

如何从我的组件的渲染函数中使用 value 参数调用 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 设置为任意值。

提前致谢，

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

我不明白在我的视图组件渲染函数中调用 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

试试这个...您的所有参数都将存在于操作对象中。

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

或者你可以这样做：

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

Answer 2

在您的动作创建器中，您正在将 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 3

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

这解决了调用问题：

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

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

How call a redux action with an argument and access from the reducer?

action

react-native

redux