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

Question

How can I call a setCounter action with a value argument from my component's render function?

How do you access an action's argument in the 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
  };
}

How to retrieve the action argument in the 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;
  }
}

How do I pass argument to setCounter action ?

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

I am learning react-native redux using this counter example: https://github.com/alinz/example-react-native-redux

This app has two buttons; increment and decrement that call actions on the counter and the counter value re-renders.

I want to add a 3rd button to setCounter to an arbitrary value.

Thanks in advance,

-Ed javascript, react-native, redux newbie

I do not understand the javascript syntax to make the call to setCounter(value) in my view component render function?

{setCounter(99)} does not work?

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

}

Solution 1

In your action creator you are adding value to action object:

// File: app/actions/counterActions.js
export function setCounter(value) {
  return {
    type: types.SETCOUNTER,
    value // it will add key `value` with argument value. 
  };
}

So, you can access this value in reducer by this key, like:

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

Solution 2

One of my main challenges was not understanding javascript.

This solved the calling problem:

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

Solution 3

Try this...All your arguments will live in the action object.

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

Or you can do:

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