Unforget Store

With the knowledge of thunk creators and useEffect in hand, you are ready to put together a client for Unforget. The first step is to create a React app and install the Redux packages you'll need:

npx create-react-app unforget
cd unforget
npm install react-redux redux-thunk

As you did with your previous React apps, you clear away any of the boilerplate that you don't want.

The memories that you have recorded with Unforget will be stored long-term in your remote MySQL database. When the client loads, however, you want to pull down just the current day's memories to a local Redux store. You open up src/store.js and define a reducer that currently does nothing to the state:

import {createStore} from 'redux';

function reducer(state, action) {
  switch (action.type) {
    default:
      return state;
  }
}

Fetching the memories from the web service is not simple, so you seed the state with some placeholder memories to test your app before meddling with thunk creators and fetch. The store is built out of the reducer and this initial state:

const initialState = {
  memories: [
    {
      id: 1,
      year: 2010,
      month: 9,
      day: 21,
      entry: "Today I had a soccer tournament. I was about to score a goal when lightning struck the ball. Now my hair won't settle down.",
    },
    {
      id: 2,
      year: 2011,
      month: 9,
      day: 21,
      entry: "It's been a year since the lightning incident, and my hair hasn't changed.",
    },
  ],
};

export const store = createStore(reducer, initialState);

In index.js, you wrap the App up in a Provider:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import {store} from './store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

That's a good start for your store. Once you've defined some actions, you'll need to come back to the reducer and add cases to the switch statement. But you first want to get the placeholder memories displaying.