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

如何从组件的渲染函数调用带有值的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中检索操作参数

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

文件：app/components/counter.js
导出默认类计数器扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{counter，increment，decreation，setCounter}=this.props；
返回(
计数：{counter}
重置为99
向上的
向下
);
}
}

我正在使用以下反例学习react native redux：

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

我想添加第三个按钮，将setCounter设置为任意值

提前感谢,

- javascript、react native、redux新手

我不理解在我的视图组件呈现函数中调用setCounter（value）的javascript语法

{setCounter（99）}不工作？

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

render（）{ const{counter，increment，decreation，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>
);

返回(
计数：{counter}
重置为99
向上的
向下
);

---

}

试试这个……所有参数都将存在于action对象中

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

或者你可以：

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

---

在action creator中，您正在向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
  };

---

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

这解决了呼叫问题：

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

setCounter（99）}style={styles.button}>
重置为99

感谢您使用

mapDispatchToProps

为AlexandrIf提供的操作和示例，不要忘记为其指定参数！