title: How call a redux action with an argument and access from the reducer?
body: <p>How can I call a <strong>setCounter</strong> action with a <strong>value</strong> argument from my component's render function?</p>
  
  <p><strong>How do you access an action's argument in the reducer?</strong></p>
  
  <pre><code>// 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
    };
  }
  </code></pre>
  
  <p>How to retrieve the action argument in the reducer?</p>
  
  <pre><code>// 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;
    }
  }
  </code></pre>
  
  <p>How do I pass argument to setCounter action ?</p>
  
  <pre><code>File: app/components/counter.js
  export default class Counter extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const { counter, increment, decrement, setCounter } = this.props;
  
      return (
        &lt;View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
          &lt;Text&gt;Count:{counter}&lt;/Text&gt;
          &lt;TouchableOpacity onPress={setCounter(99)} style={styles.button}&gt;
            &lt;Text&gt;Reset to 99&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity onPress={increment} style={styles.button}&gt;
            &lt;Text&gt;up&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity onPress={decrement} style={styles.button}&gt;
            &lt;Text&gt;down&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am learning react-native redux using this counter example:
  <a href="https://github.com/alinz/example-react-native-redux" rel="noreferrer">https://github.com/alinz/example-react-native-redux</a></p>
  
  <p>This app has two buttons; increment and decrement that call actions on the counter and the counter value re-renders.  </p>
  
  <p>I want to add a 3rd button to setCounter to an arbitrary value.</p>
  
  <p>Thanks in advance,</p>
  
  <p>-Ed
  javascript, react-native, redux newbie</p>
  
  <p>I do not understand the javascript syntax to make the call to setCounter(value) in my view component render function?</p>
  
  <p><strong>{setCounter(99)} does not work?</strong></p>
  
  <p>render() {
      const { counter, increment, decrement, setCounter } = this.props;</p>
  
  <pre><code>return (
    &lt;View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
      &lt;Text&gt;Count:{counter}&lt;/Text&gt;
      &lt;TouchableOpacity onPress={setCounter(99)} style={styles.button}&gt;
        &lt;Text&gt;Reset to 99&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
      &lt;TouchableOpacity onPress={increment} style={styles.button}&gt;
        &lt;Text&gt;up&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
      &lt;TouchableOpacity onPress={decrement} style={styles.button}&gt;
        &lt;Text&gt;down&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    &lt;/View&gt;
  );
  </code></pre>
  
  <p>}</p>