[React/Redux] Question about stores

JavaScript
1

Hello, there’s something I really don’t understand about stores.

In the Redux challenges, every time a store needed to be created, we had to use the createStore() function that took the reducer as an argument. I just completed the challenge linked below by writing the reducer, action and action creator and then creating the store with createStore(). Here’s my code:

const ADD = ‘ADD’;
const addMessage = (message) => 
 {
  return {
     type: ADD,
     message: message
    }
  }

const messageReducer = (state = [], action) => {
switch(action.type){
case ADD:
return [...state, action.message];
default:
return state;
}

};

After that, I peeked at the suggested solution, and it the store was created like this:

const ADD = 'ADD';

function addMessage(message) {
  return {
    type: ADD,
    message: message
  };
};

function messageReducer (previousState, action) {
  return [...previousState, action.message];
}

let store = {
  state: [],
  getState: () => store.state,
  dispatch: (action) => {
    if (action.type === ADD) {
      store.state = messageReducer(store.state, action);
    }
  }
};

As far as I remember, this method was not covered in the challenges. I have trouble understanding how, in my method, the reducer knows what the ‘state’ property is - is it a reserved word like the state of a React component? Ergo, does the createStore() function actually create an object like store behind the scenes, instead of doing it explicitly like in the suggested solution?

So far the tutorials have been great, but the Redux/React section feel a bit too hand-wavy and the syntax is extremely confusing! Can you help me clear this up in my head? Thank you!

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge: