Action in Reducer React-Redux

JavaScript
1

Hello,

I am having a hard time to understand in the code below where these “action.list”, “action.quoteIndex”, “action.colorIndex” are from?
How do all these above come from? Are they from “state”?

From what I understand, “action” in React-Redux is an object with “type” filed and “payload” for extra data if needed: “action.type” and “action.payload”.
Or did I miss anything?

// ===================== Reducer =====================
export const quoteReducer = (state = defaultState, action) => {
  switch (action.type) {
    case LOADING:
      return {
        ...state,
        loading: true
      };
    case FETCH_QUOTE:
      const quoteIndex = getRandomNum(action.list.length);
      const colorIndex = getRandomNum(state.colors.length);
      return {
        ...state,
        list: action.list,
        background: state.colors[colorIndex],
        current: action.list[quoteIndex],
        loading: false
      };
    case NEW_QUOTE:
      return {
        ...state,
        current: state.list[action.quoteIndex],
        background: state.colors[action.colorIndex]
      };
    default:
      return state;
  }
};

The React-Redux code above use mapStateToProps and mapDispatchToProps together.

const mapStateToProps = (state) => {
  return {
    background: state.background,
    list: state.list,
    colors: state.colors,
    loading: state.loading,
    current: state.current
  };
};

const mapDispatchToProps = (dispatch) => ({
  fetchQuote: () => dispatch(fetchQuote()),
  newQuote: (quoteIndex, colorIndex) =>
    dispatch(newQuote(quoteIndex, colorIndex))
});

Thank you for the helps.

2

It is an object with a type field and any number of other fields.

3

Thank you for the reply.
so how does action get these other extra field?
I am not so clear how and where action got these extra fields from.

4

You just write them.

{
  type: "example",
  foo: true,
  bar: "hi",
  baz: [1,2,3,4],
}
5

I have never seen this type of writing for action before, but in this example I also don’t see any writing like this for action.
The codes for Action in this example are here:

// ===================== Create Action =====================
const FETCH_QUOTE = "FETCH_QUOTE";
const NEW_QUOTE = "NEW_QUOTE";
const LOADING = "LOADING";

const fetchQuote = () => (dispatch) => {
  dispatch({ type: LOADING });
  fetch(
    "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
  )
    .then((res) => res.json())
    .then((json) => {
      dispatch({ type: FETCH_QUOTE, list: json.quotes });
    });
};

const newQuote = (quoteIndex = 0, colorIndex = 0) => {
  return {
    type: NEW_QUOTE,
    quoteIndex: quoteIndex,
    colorIndex: colorIndex
  };
};
6

You have:

{
    type: "NEW_QUOTE",
    quoteIndex: quoteIndex,
    colorIndex: colorIndex
};
1 Like
7

Ah I see. I thought these are to update the “state”… did not know these are actually attached to “action”.
Thank you very much for the helps!

8

Np. Note an action is just a plain object with a type property and some other properties. That’s it, nothing more. In your example, the action is being created using a function, and the type is using a variable, but it’s still just a plain object. Those abstractions been added over the top for the benefit of that particular program I assume, but the action is still just that plain object.

9

Thank you. Yes, I knew “action” is just an object. I was just so confused with those new fields or properties written in these action creator functions and was not linking them to “action” except “type”.

1 Like