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

发布时间：2020-12-15 05:06:07 所属栏目：百科来源：网络整理

导读：如何使用组件的渲染函数中的值参数调用setCounter操作？如何在reducer中访问动作的参数？ // File: app/actions/counterActions.jsexport function setCounter(value) { return { type: types.SETCOUNTER,value };}export function increment() { return {

如何使用组件的渲染函数中的值参数调用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,setCounter} = this.props;

return (
  <View style={{flex: 1,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>
);

}

在您的操作创建器中,您正在为操作对象添加值：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!