{"componentChunkName":"component---src-templates-content-template-js","path":"/en/part6/redux_legacy","result":{"data":{"markdownRemark":{"html":"
\n

This is the Redux-related material that has been removed from the course. You can continue with this material and its exercises if you have already started the part using Redux. Otherwise, it is recommended to follow the new material. This material will be removed in June 2026.

\n
\n
\n

So far, we have followed the state management conventions recommended by React. We have placed the state and the functions for handling it in the higher level of the component structure of the application. Quite often most of the app state and state altering functions reside directly in the root component. The state and its handler methods have then been passed to other components with props. This works up to a certain point, but when applications grow larger, state management becomes challenging.

\n

Flux-architecture

\n

Already years ago Facebook developed the Flux-architecture to make state management of React apps easier. In Flux, the state is separated from the React components and into its own stores.\nState in the store is not changed directly, but with different actions.

\n

When an action changes the state of the store, the views are rerendered:

\n\"diagramdispatcher->store->view\" srcset=\"/static/165b40470776ac449f8b9604d4828004/772e8/flux1.png 200w,\n/static/165b40470776ac449f8b9604d4828004/e17e5/flux1.png 400w,\n/static/165b40470776ac449f8b9604d4828004/5a190/flux1.png 800w,\n/static/165b40470776ac449f8b9604d4828004/c1b63/flux1.png 1200w,\n/static/165b40470776ac449f8b9604d4828004/29007/flux1.png 1600w,\n/static/165b40470776ac449f8b9604d4828004/090a8/flux1.png 2504w\" sizes=\"(max-width: 800px) 100vw, 800px\">\n

If some action on the application, for example pushing a button, causes the need to change the state, the change is made with an action.\nThis causes re-rendering the view again:

\n\"same\n

Flux offers a standard way for how and where the application's state is kept and how it is modified.

\n

Redux

\n

Facebook has an implementation for Flux, but we will be using the Redux library. It works with the same principle but is a bit simpler. Facebook also uses Redux now instead of their original Flux.

\n

We will get to know Redux by implementing a counter application yet again:

\n\"browser\n

Create a new Vite application and install redux with the command

\n
npm install redux
\n

As in Flux, in Redux the state is also stored in a store.

\n

The whole state of the application is stored in one JavaScript object in the store. Because our application only needs the value of the counter, we will save it straight to the store. If the state was more complicated, different things in the state would be saved as separate fields of the object.

\n

The state of the store is changed with actions. Actions are objects, which have at least a field determining the type of the action.\nOur application needs for example the following action:

\n
{\n  type: 'INCREMENT'\n}
\n

If there is data involved with the action, other fields can be declared as needed. However, our counting app is so simple that the actions are fine with just the type field.

\n

The impact of the action to the state of the application is defined using a reducer. In practice, a reducer is a function that is given the current state and an action as parameters. It returns a new state.

\n

Let's now define a reducer for our application at main.jsx. The file initially looks like this:

\n
const counterReducer = (state, action) => {\n  if (action.type === 'INCREMENT') {\n    return state + 1\n  } else if (action.type === 'DECREMENT') {\n    return state - 1\n  } else if (action.type === 'ZERO') {\n    return 0\n  }\n\n  return state\n}
\n

The first parameter is the state in the store. The reducer returns a new state based on the action type. So, e.g. when the type of Action is INCREMENT, the state gets the old value plus one. If the type of Action is ZERO the new value of state is zero.

\n

Let's change the code a bit. We have used if-else statements to respond to an action and change the state. However, the switch statement is the most common approach to writing a reducer.

\n

Let's also define a default value of 0 for the parameter state. Now the reducer works even if the store state has not been primed yet.

\n
const counterReducer = (state = 0, action) => {  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default: // if none of the above matches, code comes here\n      return state\n  }\n}
\n

The reducer is never supposed to be called directly from the application's code. It is only given as a parameter to the createStore function which creates the store:

\n
import { createStore } from 'redux'\nconst counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default:\n      return state\n  }\n}\n\nconst store = createStore(counterReducer)
\n

The code editor may warn that createStore is deprecated. Let's ignore this for now; there is a more detailed explanation about this further below.

\n

The store now uses the reducer to handle actions, which are dispatched or 'sent' to the store with its dispatch method.

\n
store.dispatch({ type: 'INCREMENT' })
\n

You can find out the state of the store using the method getState.

\n

For example the following code:

\n
// ...\n\nconst store = createStore(counterReducer)\n\nconsole.log(store.getState())store.dispatch({type: 'INCREMENT'})store.dispatch({type: 'INCREMENT'})store.dispatch({type: 'INCREMENT'})console.log(store.getState())store.dispatch({type: 'ZERO'})store.dispatch({type: 'DECREMENT'})console.log(store.getState())
\n

would print the following to the console

\n
0\n3\n-1
\n

because at first, the state of the store is 0. After three INCREMENT actions the state is 3. In the end, after the ZERO and DECREMENT actions, the state is -1.

\n

The third important method that the store has is subscribe, which is used to create callback functions that the store calls whenever an action is dispatched to the store.

\n

If, for example, we would add the following function to subscribe, every change in the store would be printed to the console.

\n
store.subscribe(() => {\n  const storeNow = store.getState()\n  console.log(storeNow)\n})
\n

so the code

\n
// ...\n\nconst store = createStore(counterReducer)\n\nstore.subscribe(() => {  const storeNow = store.getState()  console.log(storeNow)})\nstore.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'ZERO' })store.dispatch({ type: 'DECREMENT' })
\n

would cause the following to be printed

\n
1\n2\n3\n0\n-1
\n

The code of our counter application is the following. All of the code has been written in the same file, so store is directly available for the React code. We will get to know better ways to structure React/Redux code later. The file main.jsx looks as follows:

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\n\nconst counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default:\n      return state\n  }\n}\n\nconst store = createStore(counterReducer)\n\nconst App = () => {\n  return (\n    <div>\n      <div>{store.getState()}</div>\n      <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>\n        plus\n      </button>\n      <button onClick={() => store.dispatch({ type: 'DECREMENT' })}>\n        minus\n      </button>\n      <button onClick={() => store.dispatch({ type: 'ZERO' })}>\n        zero\n      </button>\n    </div>\n  )\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\n\nconst renderApp = () => {\n  root.render(<App />)\n}\n\nrenderApp()\nstore.subscribe(renderApp)
\n

There are a few notable things in the code.\nApp renders the value of the counter by asking it from the store with the method store.getState(). The action handlers of the buttons dispatch the right actions to the store.

\n

When the state in the store is changed, React is not able to automatically re-render the application. Thus we have registered a function renderApp, which renders the whole app, to listen for changes in the store with the store.subscribe method. Note that we have to immediately call the renderApp method. Without the call, the first rendering of the app would never happen.

\n

A note about the use of createStore

\n

The most observant will notice that the name of the function createStore is overlined. If you move the mouse over the name, an explanation will appear

\n\"vscode\n

The full explanation is as follows

\n
\n

We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

\n

Redux Toolkit is our recommended approach for writing Redux logic today, including store setup, reducers, data fetching, and more.

\n

For more details, please read this Redux docs page: https://redux.js.org/introduction/why-rtk-is-redux-today

\n

configureStore from Redux Toolkit is an improved version of createStore that simplifies setup and helps avoid common bugs.

\n

You should not be using the redux core package by itself today, except for learning purposes. The createStore method from the core redux package will not be removed, but we encourage all users to migrate to using Redux Toolkit for all Redux code.

\n
\n

So, instead of the function createStore, it is recommended to use the slightly more \"advanced\" function configureStore, and we will also use it when we have achieved the basic functionality of Redux.

\n

Side note: createStore is defined as \"deprecated\", which usually means that the feature will be removed in some newer version of the library. The explanation above and this discussion reveal that createStore will not be removed, and it has been given the status deprecated, perhaps with slightly incorrect reasons. So the function is not obsolete, but today there is a more preferable, new way to do almost the same thing.

\n

Redux-notes

\n

We aim to modify our note application to use Redux for state management. However, let's first cover a few key concepts through a simplified note application.

\n

The first version of our application, written in the file main.jsx, looks as follows:

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\n\nconst noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      state.push(action.payload)\n      return state\n    default:\n      return state\n  }\n}\n\nconst store = createStore(noteReducer)\n\nstore.dispatch({\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'the app state is in redux store',\n    important: true,\n    id: 1\n  }\n})\n\nstore.dispatch({\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'state changes are made with actions',\n    important: false,\n    id: 2\n  }\n})\n\nconst App = () => {\n  return (\n    <div>\n      <ul>\n        {store.getState().map(note => (\n          <li key={note.id}>\n            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\n\nconst renderApp = () => {\n  root.render(<App />)\n}\n\nrenderApp()\nstore.subscribe(renderApp)
\n

So far the application does not have the functionality for adding new notes, although it is possible to do so by dispatching NEW_NOTE actions.

\n

Now the actions have a type and a field payload, which contains the note to be added:

\n
{\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'state changes are made with actions',\n    important: false,\n    id: 2\n  }\n}
\n

The choice of the field name is not random. The general convention is that actions have exactly two fields, type telling the type and payload containing the data included with the Action.

\n

Pure functions, immutable

\n

The initial version of the reducer is very simple:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      state.push(action.payload)\n      return state\n    default:\n      return state\n  }\n}
\n

The state is now an Array. NEW_NOTE-type actions cause a new note to be added to the state with the push method.

\n

The application seems to be working, but the reducer we have declared is bad. It breaks the basic assumption that reducers must be pure functions.

\n

Pure functions are such, that they do not cause any side effects and they must always return the same response when called with the same parameters.

\n

We added a new note to the state with the method state.push(action.payload) which changes the state of the state-object. This is not allowed. The problem is easily solved by using the concat method, which creates a new array, which contains all the elements of the old array and the new element:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)    default:\n      return state\n  }\n}
\n

A reducer state must be composed of immutable objects. If there is a change in the state, the old object is not changed, but it is replaced with a new, changed, object. This is exactly what we did with the new reducer: the old array is replaced with the new one.

\n

Let's expand our reducer so that it can handle the change of a note's importance:

\n
{\n  type: 'TOGGLE_IMPORTANCE',\n  payload: {\n    id: 2\n  }\n}
\n

Since we do not have any code which uses this functionality yet, we are expanding the reducer in the 'test-driven' way.

\n

Configuring the test environment

\n

We have to first configure the Vitest testing library for the project. Let's install it as a development dependency for the application:

\n
npm install --save-dev vitest
\n

Let us expand package.json with a script for running the tests:

\n
{\n  // ...\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"lint\": \"eslint .\",\n    \"preview\": \"vite preview\",\n    \"test\": \"vitest\"  },\n  // ...\n}
\n

To make testing easier, let's move the reducer's code to its own module, to the file src/reducers/noteReducer.js:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)\n    default:\n      return state\n  }\n}\n\nexport default noteReducer
\n

The file main.jsx changes as follows:

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\nimport noteReducer from './reducers/noteReducer'\nconst store = createStore(noteReducer)\n\n// ...
\n

We'll also add the library deep-freeze, which can be used to ensure that the reducer has been correctly defined as an immutable function.\nLet's install the library as a development dependency:

\n
npm install --save-dev deep-freeze
\n

We are now ready to write tests.

\n

Tests for noteReducer

\n

Let's start by creating a test for handling the action NEW_NOTE. The test, which we define in file src/reducers/noteReducer.test.js, has the following content:

\n
import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport noteReducer from './noteReducer'\n\ndescribe('noteReducer', () => {\n  test('returns new state with action NEW_NOTE', () => {\n    const state = []\n    const action = {\n      type: 'NEW_NOTE',\n      payload: {\n        content: 'the app state is in redux store',\n        important: true,\n        id: 1\n      }\n    }\n\n    deepFreeze(state)\n    const newState = noteReducer(state, action)\n\n    expect(newState).toHaveLength(1)\n    expect(newState).toContainEqual(action.payload)\n  })\n})
\n

Run the test with npm test. The test ensures that the new state returned by the reducer is an array containing a single element, which is the same object as the one in the action’s payload field.

\n

The deepFreeze(state) command ensures that the reducer does not change the state of the store given to it as a parameter. If the reducer used the push command to manipulate the state, the test would fail:

\n\"terminal\n

Now we'll create a test for the TOGGLE_IMPORTANCE action:

\n
test('returns new state with action TOGGLE_IMPORTANCE', () => {\n  const state = [\n    {\n      content: 'the app state is in redux store',\n      important: true,\n      id: 1\n    },\n    {\n      content: 'state changes are made with actions',\n      important: false,\n      id: 2\n    }\n  ]\n\n  const action = {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: {\n      id: 2\n    }\n  }\n\n  deepFreeze(state)\n  const newState = noteReducer(state, action)\n\n  expect(newState).toHaveLength(2)\n\n  expect(newState).toContainEqual(state[0])\n\n  expect(newState).toContainEqual({\n    content: 'state changes are made with actions',\n    important: true,\n    id: 2\n  })\n})
\n

So the following action

\n
{\n  type: 'TOGGLE_IMPORTANCE',\n  payload: {\n    id: 2\n  }\n}
\n

has to change the importance of the note with the id 2.

\n

The reducer is expanded as follows

\n
const noteReducer = (state = [], action) => {\n  switch(action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)\n    case 'TOGGLE_IMPORTANCE': {      const id = action.payload.id      const noteToChange = state.find(n => n.id === id)      const changedNote = {        ...noteToChange,        important: !noteToChange.important      }      return state.map(note => (note.id !== id ? note : changedNote))    }    default:\n      return state\n  }\n}
\n

We create a copy of the note whose importance has changed with the syntax familiar from part 2, and replace the state with a new state containing all the notes which have not changed and the copy of the changed note changedNote.

\n

Let's recap what goes on in the code. First, we search for a specific note object, the importance of which we want to change:

\n
const noteToChange = state.find(n => n.id === id)
\n

then we create a new object, which is a copy of the original note, only the value of the important field has been changed to the opposite of what it was:

\n
const changedNote = { \n  ...noteToChange, \n  important: !noteToChange.important \n}
\n

A new state is then returned. We create it by taking all of the notes from the old state except for the desired note, which we replace with its slightly altered copy:

\n
state.map(note => (note.id !== id ? note : changedNote))
\n

Array spread syntax

\n

Because we now have quite good tests for the reducer, we can refactor the code safely.

\n

Adding a new note creates the state returned from the Array's concat function. Let's take a look at how we can achieve the same by using the JavaScript array spread syntax:

\n
const noteReducer = (state = [], action) => {\n  switch(action.type) {\n    case 'NEW_NOTE':\n      return [...state, action.payload]    case 'TOGGLE_IMPORTANCE': {\n      // ...\n    }\n    default:\n    return state\n  }\n}
\n

The spread -syntax works as follows. If we declare

\n
const numbers = [1, 2, 3]
\n

...numbers breaks the array up into individual elements, which can be placed in another array.

\n
[...numbers, 4, 5]
\n

and the result is an array [1, 2, 3, 4, 5].

\n

If we would have placed the array to another array without the spread

\n
[numbers, 4, 5]
\n

the result would have been [ [1, 2, 3], 4, 5].

\n

When we take elements from an array by destructuring, a similar-looking syntax is used to gather the rest of the elements:

\n
const numbers = [1, 2, 3, 4, 5, 6]\n\nconst [first, second, ...rest] = numbers\n\nconsole.log(first)     // prints 1\nconsole.log(second)   // prints 2\nconsole.log(rest)     // prints [3, 4, 5, 6]
\n
\n
\n

Exercises 6.1.-6.2.

\n

Let's make a simplified version of the unicafe exercise from part 1. Let's handle the state management with Redux.

\n

You can take the code from this repository https://github.com/fullstack-hy2020/unicafe-redux for the base of your project.

\n

Start by removing the git configuration of the cloned repository, and by installing dependencies

\n
cd unicafe-redux   // go to the directory of cloned repository\nrm -rf .git\nnpm install
\n

6.1: Unicafe Revisited, step 1

\n

Before implementing the functionality of the UI, let's implement the functionality required by the store.

\n

We have to save the number of each kind of feedback to the store, so the form of the state in the store is:

\n
{\n  good: 5,\n  ok: 4,\n  bad: 2\n}
\n

The project has the following base for a reducer:

\n
const initialState = {\n  good: 0,\n  ok: 0,\n  bad: 0\n}\n\nconst counterReducer = (state = initialState, action) => {\n  console.log(action)\n  switch (action.type) {\n    case 'GOOD':\n      return state\n    case 'OK':\n      return state\n    case 'BAD':\n      return state\n    case 'RESET':\n      return state\n    default:\n      return state\n  }\n}\n\nexport default counterReducer
\n

and a base for its tests

\n
import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport counterReducer from './reducer'\n\ndescribe('unicafe reducer', () => {\n  const initialState = {\n    good: 0,\n    ok: 0,\n    bad: 0\n  }\n\n  test('should return a proper initial state when called with undefined state', () => {\n    const action = {\n      type: 'DO_NOTHING'\n    }\n\n    const newState = counterReducer(undefined, action)\n    expect(newState).toEqual(initialState)\n  })\n\n  test('good is incremented', () => {\n    const action = {\n      type: 'GOOD'\n    }\n    const state = initialState\n\n    deepFreeze(state)\n    const newState = counterReducer(state, action)\n    expect(newState).toEqual({\n      good: 1,\n      ok: 0,\n      bad: 0\n    })\n  })\n})
\n

Implement the reducer and its tests.

\n

The provided first test should pass without any changes. Redux expects that the reducer returns the original state when it is called with a first parameter - which represents the previous state - with the value undefined.

\n

Start by expanding the reducer so that both tests pass. After that, add the remaining tests for the different actions of the reducer and implement the corresponding functionality in the reducer.

\n

In the tests, make sure that the reducer is an immutable function with the deep-freeze library. A good model for the reducer is the redux-notes example above.

\n

6.2: Unicafe Revisited, step2

\n

Now implement the actual functionality of the application.

\n

Your application can have a modest appearance, nothing else is needed but buttons and the number of reviews for each type:

\n\"browser\n
\n
\n

Uncontrolled form

\n

Let's add the functionality for adding new notes and changing their importance:

\n
// ...\n\nconst generateId = () => Number((Math.random() * 1000000).toFixed(0))\nconst App = () => {\n  const addNote = event => {    event.preventDefault()    const content = event.target.note.value    event.target.note.value = ''    store.dispatch({      type: 'NEW_NOTE',      payload: {        content,        important: false,        id: generateId()      }    })  }\n  const toggleImportance = id => {    store.dispatch({      type: 'TOGGLE_IMPORTANCE',      payload: { id }    })  }\n  return (\n    <div>\n      <form onSubmit={addNote}>        <input name=\"note\" />         <button type=\"submit\">add</button>      </form>      <ul>\n        {store.getState().map(note => (\n          <li key={note.id} onClick={() => toggleImportance(note.id)}>            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\n// ...
\n

The implementation of both functionalities is straightforward. It is noteworthy that we have not bound the state of the form fields to the state of the App component like we have previously done. React calls this kind of form uncontrolled.

\n
\n

Uncontrolled forms have certain limitations (for example, dynamic error messages or disabling the submit button based on input are not possible). However they are suitable for our current needs.

\n
\n

You can read more about uncontrolled forms here.

\n

The method for adding new notes is simple, it dispatches the action for adding notes:

\n
addNote = event => {\n  event.preventDefault()\n  const content = event.target.note.value\n  event.target.note.value = ''\n  store.dispatch({\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  })\n}
\n

The content of the new note is obtained directly from the form’s input field, which can be accessed through the event object:

\n
const content = event.target.note.value
\n

Please note that the input field must have a name in order to access its value:

\n
<form onSubmit={addNote}>\n  <input name=\"note\" />  <button type=\"submit\">add</button>\n</form>
\n

A note's importance can be changed by clicking its name. The event handler is very simple:

\n
toggleImportance = id => {\n  store.dispatch({\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  })\n}
\n

Action creators

\n

We begin to notice that, even in applications as simple as ours, using Redux can simplify the frontend code. However, we can do a lot better.

\n

React components don't need to know the Redux action types and forms.\nLet's separate creating actions into separate functions:

\n
const createNote = content => {\n  return {\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  }\n}\n\nconst toggleImportanceOf = id => {\n  return {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  }\n}
\n

Functions that create actions are called action creators.

\n

The App component does not have to know anything about the inner representation of the actions anymore, it just gets the right action by calling the creator function:

\n
const App = () => {\n  const addNote = event => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    store.dispatch(createNote(content))    \n  }\n  \n  const toggleImportance = id => {\n    store.dispatch(toggleImportanceOf(id))  }\n\n  // ...\n}
\n

Forwarding Redux Store to various components

\n

Aside from the reducer, our application is in one file. This is of course not sensible, and we should separate App into its module.

\n

Now the question is, how can the App access the store after the move? And more broadly, when a component is composed of many smaller components, there must be a way for all of the components to access the store.

\n

There are multiple ways to share the Redux store with the components. First, we will look into the newest, and possibly the easiest way, which is using the hooks API of the react-redux library.

\n

First, we install react-redux

\n
npm install react-redux
\n

Let's organize the application code more sensibly into several different files. The file main.jsx looks as follows after the changes:

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\nimport { Provider } from 'react-redux'\n\nimport App from './App'\nimport noteReducer from './reducers/noteReducer'\n\nconst store = createStore(noteReducer)\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

Note, that the application is now defined as a child of a Provider component provided by the react-redux library. The application's store is given to the Provider as its attribute store:

\n
const store = createStore(noteReducer)\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>    <App />\n  </Provider>)
\n

This makes the store accessible to all components in the application, as we will soon see.

\n

Defining the action creators has been moved to the file src/reducers/noteReducer.js where the reducer is defined. That file looks like this:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return [...state, action.payload]\n    case 'TOGGLE_IMPORTANCE': {\n      const id = action.payload.id\n      const noteToChange = state.find(n => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important\n      }\n      return state.map(note => (note.id !== id ? note : changedNote))\n    }\n    default:\n      return state\n  }\n}\n\nconst generateId = () =>\n  Number((Math.random() * 1000000).toFixed(0))\n\nexport const createNote = (content) => {\n  return {\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  }\n}\n\nexport const toggleImportanceOf = (id) => {\n  return {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  }\n}\n\nexport default noteReducer
\n

The module now has multiple export commands. The reducer function is still returned with the export default command, so the reducer can be imported the usual way:

\n
import noteReducer from './reducers/noteReducer'
\n

A module can have only one default export, but multiple \"normal\" exports:

\n
export const createNote = (content) => {\n  // ...\n}\n\nexport const toggleImportanceOf = (id) => { \n  // ...\n}
\n

Normally (not as defaults) exported functions can be imported with the curly brace syntax:

\n
import { createNote } from '../../reducers/noteReducer'
\n

Next, we move the App component into its own file src/App.jsx. The content of the file is as follows:

\n
import { createNote, toggleImportanceOf } from './reducers/noteReducer'\nimport { useSelector, useDispatch } from 'react-redux' \n\n\nconst App = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state)\n\n  const addNote = (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  const toggleImportance = (id) => {\n    dispatch(toggleImportanceOf(id))\n  }\n\n  return (\n    <div>\n      <form onSubmit={addNote}>\n        <input name=\"note\" /> \n        <button type=\"submit\">add</button>\n      </form>\n      <ul>\n        {notes.map(note => \n          <li\n            key={note.id} \n            onClick={() => toggleImportance(note.id)}\n          >\n            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        )}\n      </ul>\n    </div>\n  )\n}\n\nexport default App
\n

There are a few things to note in the code. Previously the code dispatched actions by calling the dispatch method of the Redux store:

\n
store.dispatch({\n  type: 'TOGGLE_IMPORTANCE',\n  payload: { id }\n})
\n

Now it does it with the dispatch function from the useDispatch hook.

\n
import { useSelector, useDispatch } from 'react-redux'\nconst App = () => {\n  const dispatch = useDispatch()  // ...\n\n  const toggleImportance = (id) => {\n    dispatch(toggleImportanceOf(id))  }\n\n  // ...\n}
\n

The useDispatch hook provides any React component access to the dispatch function of the Redux store defined in main.jsx. This allows all components to make changes to the state of the Redux store.

\n

The component can access the notes stored in the store with the useSelector-hook of the react-redux library.

\n
import { useSelector, useDispatch } from 'react-redux'\nconst App = () => {\n  // ...\n  const notes = useSelector(state => state)  // ...\n}
\n

useSelector receives a function as a parameter. The function either searches for or selects data from the Redux store.\nHere we need all of the notes, so our selector function returns the whole state:

\n
state => state
\n

which is a shorthand for:

\n
(state) => {\n  return state\n}
\n

Usually, selector functions are a bit more interesting and return only selected parts of the contents of the Redux store.\nWe could for example return only notes marked as important:

\n
const importantNotes = useSelector(state => state.filter(note => note.important))
\n

The current version of the application can be found on GitHub, branch part6-0.

\n

More components

\n

Let's separate the form responsible for creating a new note into its own component in the file src/components/NoteForm.jsx:

\n
import { useDispatch } from 'react-redux'\nimport { createNote } from '../reducers/noteReducer'\n\nconst NoteForm = () => {\n  const dispatch = useDispatch()\n\n  const addNote = (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}\n\nexport default NoteForm
\n

Unlike in the React code we did without Redux, the event handler for changing the state of the app (which now lives in Redux) has been moved away from the App to a child component. The logic for changing the state in Redux is still neatly separated from the whole React part of the application.

\n

We'll also separate the list of notes and displaying a single note into their own components Let's place both in the file src/components/Notes.jsx:

\n
import { useDispatch, useSelector } from 'react-redux'\nimport { toggleImportanceOf } from '../reducers/noteReducer'\n\nconst Note = ({ note, handleClick }) => {\n  return (\n    <li onClick={handleClick}>\n      {note.content}\n      <strong> {note.important ? 'important' : ''}</strong>\n    </li>\n  )\n}\n\nconst Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state)\n\n  return (\n    <ul>\n      {notes.map(note => (\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => dispatch(toggleImportanceOf(note.id))}\n        />\n      ))}\n    </ul>\n  )\n}\n\nexport default Notes
\n

The logic for changing the importance of a note is now in the component managing the list of notes.

\n

Only a small amount of code remains in the file App.jsx:

\n
import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\n\nconst App = () => {\n  return (\n    <div>\n      <NoteForm />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

Note, responsible for rendering a single note, is very simple and is not aware that the event handler it gets as props dispatches an action. These kinds of components are called presentational in React terminology.

\n

Notes, on the other hand, is a container component, as it contains some application logic: it defines what the event handlers of the Note components do and coordinates the configuration of presentational components, that is, the Notes.

\n

The code of the Redux application can be found on GitHub, on the branch part6-1.

\n
\n
\n

Exercises 6.3.-6.8.

\n

Let's make a new version of the anecdote voting application from part 1. Take the project from this repository https://github.com/fullstack-hy2020/redux-anecdotes as the base of your solution.

\n

If you clone the project into an existing git repository, remove the git configuration of the cloned application:

\n
cd redux-anecdotes  // go to the cloned repository\nrm -rf .git
\n

The application can be started as usual, but you have to install the dependencies first:

\n
npm install\nnpm run dev
\n

After completing these exercises, your application should look like this:

\n\"browser\n

6.3: Anecdotes, step 1

\n

Implement the functionality for voting anecdotes. The number of votes must be saved to a Redux store.

\n

6.4: Anecdotes, step 2

\n

Implement the functionality for adding new anecdotes.

\n

You can keep the form uncontrolled like we did earlier.

\n

6.5: Anecdotes, step 3

\n

Make sure that the anecdotes are ordered by the number of votes.

\n

6.6: Anecdotes, step 4

\n

If you haven't done so already, separate the creation of action-objects to action creator-functions and place them in the src/reducers/anecdoteReducer.js file, so do what we have been doing since the chapter action creators.

\n

6.7: Anecdotes, step 5

\n

Separate the creation of new anecdotes into a component called AnecdoteForm. Move all logic for creating a new anecdote into this new component.

\n

6.8: Anecdotes, step 6

\n

Separate the rendering of the anecdote list into a component called AnecdoteList. Move all logic related to voting for an anecdote to this new component.

\n

Now the App component should look like this:

\n
import AnecdoteForm from './components/AnecdoteForm'\nimport AnecdoteList from './components/AnecdoteList'\n\nconst App = () => {\n  return (\n    <div>\n      <h2>Anecdotes</h2>\n      <AnecdoteList />\n      <AnecdoteForm />\n    </div>\n  )\n}\n\nexport default App
\n
\n
\n

Let's continue our work with the simplified Redux version of our notes application.

\n

To ease our development, let's change our reducer so that the store gets initialized with a state that contains a couple of notes:

\n
const initialState = [  {    content: 'reducer defines how redux store works',    important: true,    id: 1,  },  {    content: 'state of store can contain any data',    important: false,    id: 2,  },]\nconst noteReducer = (state = initialState, action) => {  // ...\n}\n\n// ...\n\nexport default noteReducer
\n

Store with complex state

\n

Let's implement filtering for the notes that are displayed to the user. The user interface for the filters will be implemented with radio buttons:

\n\"browser\n

Let's start with a very simple and straightforward implementation:

\n
import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\n\nconst App = () => {\n  const filterSelected = (value) => {    console.log(value)  }\n  return (\n    <div>\n      <NoteForm />\n      <div>        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('ALL')}        />        all        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('IMPORTANT')}        />        important        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('NONIMPORTANT')}        />        nonimportant      </div>      <Notes />\n    </div>\n  )\n}
\n

Since the name attribute of all the radio buttons is the same, they form a button group where only one option can be selected.

\n

The buttons have a change handler that currently only prints the string associated with the clicked button to the console.

\n

In the following section, we will implement filtering by storing both the notes as well as the value of the filter in the redux store. When we are finished, we would like the state of the store to look like this:

\n
{\n  notes: [\n    { content: 'reducer defines how redux store works', important: true, id: 1},\n    { content: 'state of store can contain any data', important: false, id: 2}\n  ],\n  filter: 'IMPORTANT'\n}
\n

Only the array of notes was stored in the state of the previous implementation of our application. In the new implementation, the state object has two properties, notes that contains the array of notes and filter that contains a string indicating which notes should be displayed to the user.

\n

Combined reducers

\n

We could modify our current reducer to deal with the new shape of the state. However, a better solution in this situation is to define a new separate reducer for the state of the filter. Let's also create a new action creator function and place the code in the module src/reducers/filterReducer.js:

\n
const filterReducer = (state = 'ALL', action) => {\n  switch (action.type) {\n    case 'SET_FILTER':\n      return action.payload\n    default:\n      return state\n  }\n}\n\nexport const filterChange = filter => {\n  return {\n    type: 'SET_FILTER',\n    payload: filter\n  }\n}\n\nexport default filterReducer
\n

The actions for changing the state of the filter look like this:

\n
{\n  type: 'SET_FILTER',\n  payload: 'IMPORTANT'\n}
\n

We can create the actual reducer for our application by combining the two existing reducers with the combineReducers function.

\n

Let's define the combined reducer in the main.jsx file. The updated content of the file is as follows:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { createStore, combineReducers } from 'redux'\n\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer\n})\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <div />\n  </Provider>\n)
\n

Since our application breaks completely at this point, we render an empty div element instead of the App component.

\n

Thanks to the console.log command, the state of the store is printed to the console:

\n\"devtools\n

As we can see from the output, the store has the exact shape we wanted it to!

\n

Let's take a closer look at how the combined reducer is created:

\n
const reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer,\n})
\n

The state of the store defined by the reducer above is an object with two properties: notes and filter. The value of the notes property is defined by the noteReducer, which does not have to deal with the other properties of the state. Likewise, the filter property is managed by the filterReducer.

\n

Before we make more changes to the code, let's take a look at how different actions change the state of the store defined by the combined reducer. Let's temporarily add the following lines to the file main.jsx:

\n
// ...\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nimport { createNote } from './reducers/noteReducer'import { filterChange } from './reducers/filterReducer'\nstore.subscribe(() => console.log(store.getState()))store.dispatch(filterChange('IMPORTANT'))store.dispatch(createNote('combineReducers forms one reducer from many simple reducers'))\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <div />\n  </Provider>\n)
\n

By simulating the creation of a note and changing the state of the filter in this fashion, the state of the store gets logged to the console after every change that is made to the store:

\n\"devtools\n

At this point, it is good to become aware of a tiny but important detail. If we add a console log statement to the beginning of both reducers:

\n
const filterReducer = (state = 'ALL', action) => {\n  console.log('ACTION: ', action)  // ...\n}
\n

Based on the console output one might get the impression that every action gets duplicated:

\n\"devtools\n

Is there a bug in our code? No. The combined reducer works in such a way that every action gets handled in every part of the combined reducer, or in other words, every reducer \"listens\" to all of the dispatched actions and does something with them if it has been instructed to do so. Typically only one reducer is interested in any given action, but there are situations where multiple reducers change their respective parts of the state based on the same action.

\n

Finishing the filters

\n

Let's finish the application so that it uses the combined reducer. Let's remove the extra test code from the file main.jsx and restore App as the rendered component. The updated content of the file is as follows:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { createStore, combineReducers } from 'redux'\n\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer\n})\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

Next, let's fix a bug that is caused by the code expecting the application store to be an array of notes:

\n\"browser\n

It's an easy fix. Because the notes are in the store's field notes, we only have to make a little change to the selector function:

\n
const Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state.notes)\n  return(\n    <ul>\n      {notes.map(note =>\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => \n            dispatch(toggleImportanceOf(note.id))\n          }\n        />\n      )}\n    </ul>\n  )\n}
\n

Previously the selector function returned the whole state of the store:

\n
const notes = useSelector(state => state)
\n

And now it returns only its field notes

\n
const notes = useSelector(state => state.notes)
\n

Let's extract the visibility filter into its own src/components/VisibilityFilter.jsx component:

\n
import { useDispatch } from 'react-redux'\nimport { filterChange } from '../reducers/filterReducer'\n\nconst VisibilityFilter = () => {\n  const dispatch = useDispatch()\n\n  return (\n    <div>\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('ALL'))}\n      />\n      all\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('IMPORTANT'))}\n      />\n      important\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('NONIMPORTANT'))}\n      />\n      nonimportant\n    </div>\n  )\n}\n\nexport default VisibilityFilter
\n

With the new component, App can be simplified as follows:

\n
import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\n\nconst App = () => {\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

The implementation is rather straightforward. Clicking the different radio buttons changes the state of the store's filter property.

\n

Let's change the Notes component to incorporate the filter:

\n
const Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => {    if (state.filter === 'ALL') {      return state.notes    }    return state.filter === 'IMPORTANT'      ? state.notes.filter(note => note.important)      : state.notes.filter(note => !note.important)  })\n  return (\n    <ul>\n      {notes.map(note => (\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => dispatch(toggleImportanceOf(note.id))}\n        />\n      ))}\n    </ul>\n  )\n}
\n

We only make changes to the selector function, which used to be

\n
useSelector(state => state.notes)
\n

Let's simplify the selector by destructuring the fields from the state it receives as a parameter:

\n
const notes = useSelector(({ filter, notes }) => {\n  if ( filter === 'ALL' ) {\n    return notes\n  }\n  return filter  === 'IMPORTANT' \n    ? notes.filter(note => note.important)\n    : notes.filter(note => !note.important)\n})
\n

There is a slight cosmetic flaw in our application. Even though the filter is set to ALL by default, the associated radio button is not selected. Naturally, this issue can be fixed, but since this is an unpleasant but ultimately harmless bug we will save the fix for later.

\n

The current version of the application can be found on GitHub, branch part6-2.

\n
\n
\n

Exercise 6.9

\n

6.9 Anecdotes, step 7

\n

Implement filtering for the anecdotes that are displayed to the user.

\n\"browser\n

Store the state of the filter in the redux store. It is recommended to create a new reducer, action creators, and a combined reducer for the store using the combineReducers function.

\n

Create a new Filter component for displaying the filter. You can use the following code as a template for the component:

\n
const Filter = () => {\n  const handleChange = (event) => {\n    // input-field value is in variable event.target.value\n  }\n  const style = {\n    marginBottom: 10\n  }\n\n  return (\n    <div style={style}>\n      filter <input onChange={handleChange} />\n    </div>\n  )\n}\n\nexport default Filter
\n
\n
\n

Redux Toolkit and Refactoring the Store Configuration

\n

As we have seen so far, Redux's configuration and state management implementation requires quite a lot of effort. This is manifested for example in the reducer and action creator-related code which has somewhat repetitive boilerplate code. Redux Toolkit is a library that solves these common Redux-related problems. The library for example greatly simplifies the configuration of the Redux store and offers a large variety of tools to ease state management.

\n

Let's start using Redux Toolkit in our application by refactoring the existing code. First, we will need to install the library:

\n
npm install @reduxjs/toolkit
\n

Next, open the main.jsx file which currently creates the Redux store. Instead of Redux's createStore function, let's create the store using Redux Toolkit's configureStore function:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { configureStore } from '@reduxjs/toolkit'\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst store = configureStore({  reducer: {    notes: noteReducer,    filter: filterReducer  }})\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

We already got rid of a few lines of code, now we don't need the combineReducers function to create the store's reducer. We will soon see that the configureStore function has many additional benefits such as the effortless integration of development tools and many commonly used libraries without the need for additional configuration.

\n

Let's further clean up the main.jsx file by moving the code related to the creation of the Redux store into a separate file. Let's create a new file src/store.js:

\n
import { configureStore } from '@reduxjs/toolkit'\n\nimport noteReducer from './reducers/noteReducer'\nimport filterReducer from './reducers/filterReducer'\n\nconst store = configureStore({\n  reducer: {\n    notes: noteReducer,\n    filter: filterReducer\n  }\n})\n\nexport default store
\n

After the changes, the content of the main.jsx is the following:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\n\nimport App from './App'\nimport store from './store'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

Redux Toolkit and Refactoring Reducers

\n

Let's move on to refactoring the reducers, which brings forth the benefits of the Redux Toolkit. With Redux Toolkit, we can easily create reducer and related action creators using the createSlice function. We can use the createSlice function to refactor the reducer and action creators in the reducers/noteReducer.js file in the following manner:

\n
import { createSlice } from '@reduxjs/toolkit'\nconst initialState = [\n  {\n    content: 'reducer defines how redux store works',\n    important: true,\n    id: 1,\n  },\n  {\n    content: 'state of store can contain any data',\n    important: false,\n    id: 2,\n  },\n]\n\nconst generateId = () =>\n  Number((Math.random() * 1000000).toFixed(0))\n\nconst noteSlice = createSlice({  name: 'notes',  initialState,  reducers: {    createNote(state, action) {      const content = action.payload      state.push({        content,        important: false,        id: generateId(),      })    },    toggleImportanceOf(state, action) {      const id = action.payload      const noteToChange = state.find(n => n.id === id)      const changedNote = {         ...noteToChange,         important: !noteToChange.important       }      return state.map(note =>        note.id !== id ? note : changedNote       )         }  },})\nexport const { createNote, toggleImportanceOf } = noteSlice.actionsexport default noteSlice.reducer
\n

The createSlice function's name parameter defines the prefix which is used in the action's type values. For example, the createNote action defined later will have the type value of notes/createNote. It is a good practice to give the parameter a value which is unique among the reducers. This way there won't be unexpected collisions between the application's action type values.\nThe initialState parameter defines the reducer's initial state.\nThe reducers parameter takes the reducer itself as an object, of which functions handle state changes caused by certain actions. Note that the action.payload in the function contains the argument provided by calling the action creator:

\n
dispatch(createNote('Redux Toolkit is awesome!'))
\n

This dispatch call is equivalent to dispatching the following object:

\n
dispatch({ type: 'notes/createNote', payload: 'Redux Toolkit is awesome!' })
\n

If you followed closely, you might have noticed that inside the createNote action, there seems to happen something that violates the reducers' immutability principle mentioned earlier:

\n
createNote(state, action) {\n  const content = action.payload\n\n  state.push({\n    content,\n    important: false,\n    id: generateId(),\n  })\n}
\n

We are mutating state argument's array by calling the push method instead of returning a new instance of the array. What's this all about?

\n

Redux Toolkit utilizes the Immer library with reducers created by createSlice function, which makes it possible to mutate the state argument inside the reducer. Immer uses the mutated state to produce a new, immutable state and thus the state changes remain immutable. Note that state can be changed without \"mutating\" it, as we have done with the toggleImportanceOf action. In this case, the function directly returns the new state. Nevertheless mutating the state will often come in handy especially when a complex state needs to be updated.

\n

The createSlice function returns an object containing the reducer as well as the action creators defined by the reducers parameter. The reducer can be accessed by the noteSlice.reducer property, whereas the action creators by the noteSlice.actions property. We can produce the file's exports in the following way:

\n
const noteSlice = createSlice({\n  // ...\n})\n\nexport const { createNote, toggleImportanceOf } = noteSlice.actionsexport default noteSlice.reducer
\n

The imports in other files will work just as they did before:

\n
import noteReducer, { createNote, toggleImportanceOf } from './reducers/noteReducer'
\n

We need to alter the action type names in the tests due to the conventions of ReduxToolkit:

\n
import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport noteReducer from './noteReducer'\n\ndescribe('noteReducer', () => {\n  test('returns new state with action notes/createNote', () => {    const state = []\n    const action = {\n      type: 'notes/createNote',      payload: 'the app state is in redux store'    }\n\n    deepFreeze(state)\n    const newState = noteReducer(state, action)\n\n    expect(newState).toHaveLength(1)\n    expect(newState.map(note => note.content)).toContainEqual(action.payload)  })\n})\n\ntest('returns new state with action notes/toggleImportanceOf', () => {  const state = [\n    {\n      content: 'the app state is in redux store',\n      important: true,\n      id: 1\n    },\n    {\n      content: 'state changes are made with actions',\n      important: false,\n      id: 2\n    }\n  ]\n\n  const action = {\n    type: 'notes/toggleImportanceOf',    payload: 2  }\n\n  deepFreeze(state)\n  const newState = noteReducer(state, action)\n\n  expect(newState).toHaveLength(2)\n\n  expect(newState).toContainEqual(state[0])\n\n  expect(newState).toContainEqual({\n    content: 'state changes are made with actions',\n    important: true,\n    id: 2\n  })\n})
\n

You can find the code for our current application in its entirety in the part6-3 branch of this GitHub repository.

\n

Redux Toolkit and console.log

\n

As we have learned, console.log is an extremely powerful tool; it often saves us from trouble.

\n

Let's try to print the state of the Redux Store to the console in the middle of the reducer created with the function createSlice:

\n
const noteSlice = createSlice({\n  name: 'notes',\n  initialState,\n  reducers: {\n    // ...\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n\n      const noteToChange = state.find(n => n.id === id)\n\n      const changedNote = { \n        ...noteToChange, \n        important: !noteToChange.important \n      }\n\n      console.log(state)\n      return state.map(note =>\n        note.id !== id ? note : changedNote \n      )     \n    }\n  },\n})
\n

When we now change the importance of a note by clicking its name, the following is printed to the console

\n\"devtools\n

The output is interesting but not very useful. This is about the previously mentioned Immer library used by the Redux Toolkit internally to save the state of the Store.

\n

The state can be converted to a human-readable format by using the current function from the immer library. The function can be imported with the following command:

\n
import { current } from '@reduxjs/toolkit'
\n

and after this, the state can be printed to the console with the following command:

\n
console.log(current(state))
\n

Console output is now human readable

\n\"dev\n

Redux DevTools

\n

Redux DevTools is a Chrome addon that offers useful development tools for Redux. It can be used for example to inspect the Redux store's state and dispatch actions through the browser's console. When the store is created using Redux Toolkit's configureStore function, no additional configuration is needed for Redux DevTools to work.

\n

Once the addon is installed, clicking the Redux tab in the browser's developer tools, the Redux DevTools should open:

\n\"browser\n

You can inspect how dispatching a certain action changes the state by clicking the action:

\n\"devtools\n

It is also possible to dispatch actions to the store using the development tools:

\n\"devtools\n
\n
\n

Exercises 6.10.-6.13.

\n

Let's continue working on the anecdote application using Redux that we started in exercise 6.3.

\n

6.10 Anecdotes, step 8

\n

Install Redux Toolkit for the project. Move the Redux store creation into the file store.js and use Redux Toolkit's configureStore to create the store.

\n

Change the definition of the filter reducer and action creators to use the Redux Toolkit's createSlice function.

\n

Also, start using Redux DevTools to debug the application's state easier.

\n

6.11 Anecdotes, step 9

\n

Change also the definition of the anecdote reducer and action creators to use the Redux Toolkit's createSlice function.

\n

6.12 Anecdotes, step 10

\n

The application has a ready-made body for the Notification component:

\n
const Notification = () => {\n  const style = {\n    border: 'solid',\n    padding: 10,\n    borderWidth: 1,\n    marginBottom: 10\n  }\n\n  return (\n    <div style={style}>\n      render here notification...\n    </div>\n  )\n}\n\nexport default Notification
\n

Extend the component so that it renders the message stored in the Redux store. Create a separate reducer for the new functionality by using the Redux Toolkit's createSlice function.

\n

The application does not have to use the Notification component intelligently at this point in the exercises. It is enough for the application to display the initial value set for the message in the notificationReducer.

\n

6.13 Anecdotes, step 11

\n

Extend the application so that it uses the Notification component to display a message for five seconds when the user votes for an anecdote or creates a new anecdote:

\n\"browser\n

It's recommended to create separate action creators for setting and removing notifications.

\n
\n
\n

Setting up JSON Server

\n

Let's expand the application so that the notes are stored in the backend. We'll use json-server, familiar from part 2.

\n

The initial state of the database is stored in the file db.json, which is placed in the root of the project:

\n
{\n  \"notes\": [\n    {\n      \"content\": \"the app state is in redux store\",\n      \"important\": true,\n      \"id\": 1\n    },\n    {\n      \"content\": \"state changes are made with actions\",\n      \"important\": false,\n      \"id\": 2\n    }\n  ]\n}
\n

We'll install json-server for the project:

\n
npm install json-server --save-dev
\n

and add the following line to the scripts part of the file package.json

\n
\"scripts\": {\n  \"server\": \"json-server -p 3001 db.json\",\n  // ...\n}
\n

Now let's launch json-server with the command npm run server.

\n

Fetch API

\n

In software development, it is often necessary to consider whether a certain functionality should be implemented using an external library or whether it is better to utilize the native solutions provided by the environment. Both approaches have their own advantages and challenges.

\n

In the earlier parts of this course, we used the Axios library to make HTTP requests. Now, let's explore an alternative way to make HTTP requests using the native Fetch API.

\n

It is typical for an external library like Axios to be implemented using other external libraries. For example, if you install Axios in your project with the command npm install axios, the console output will be:

\n
$ npm install axios\n\nadded 23 packages, and audited 302 packages in 1s\n\n71 packages are looking for funding\n  run `npm fund` for details\n\nfound 0 vulnerabilities
\n

So, in addition to the Axios library, the command would install over 20 other npm packages that Axios needs to function.

\n

The Fetch API provides a similar way to make HTTP requests as Axios, but using the Fetch API does not require installing any external libraries. Maintaining the application becomes easier when there are fewer libraries to update, and security is also improved because the potential attack surface of the application is reduced. The security and maintainability of applications is discussed further in part 7 of the course.

\n

In practice, requests are made using the fetch() function. The syntax used differs somewhat from Axios. We will also soon notice that Axios has taken care of some things for us and made our lives easier. However, we will now use the Fetch API, as it is a widely used native solution that every Full Stack developer should be familiar with.

\n

Getting data from the backend

\n

Let's create a method for fetching data from the backend in the file src/services/notes.js:

\n
const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  const data = await response.json()\n  return data\n}\n\nexport default { getAll }
\n

Let's take a closer look at the implementation of the getAll method. The notes are now fetched from the backend by calling the fetch() function, which is given the backend's URL as an argument. The request type is not explicitly defined, so fetch performs its default action, which is a GET request.

\n

Once the response has arrived, the success of the request is checked using the response.ok property, and an error is thrown if necessary:

\n
if (!response.ok) {\n  throw new Error('Failed to fetch notes')\n}
\n

The response.ok attribute is set to true if the request was successful, meaning the response status code is between 200 and 299. For all other status codes, such as 404 or 500, it is set to false.

\n

Note that fetch does not automatically throw an error even if the response status code is, for example, 404. Error handling must be implemented manually, as we have done here.

\n

If the request is successful, the data contained in the response is converted to JSON format:

\n
const data = await response.json()
\n

fetch does not automatically convert any data included in the response to JSON format; the conversion must be done manually. It is also important to note that response.json() is an asynchronous method, so the await keyword is required.

\n

Let's further simplify the code by directly returning the data returned by the response.json() method:

\n
const getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  return await response.json()}
\n

Initializing the store with data fetched from the server

\n

Let's now modify our application so that the application state is initialized with notes fetched from the server.

\n

In the file noteReducer.js, change the initialization of the notes state so that by default there are no notes:

\n
const noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],  // ...\n})
\n

Let's add an action creator called setNotes, which allows us to directly replace the array of notes. We can create the desired action creator using the createSlice function as follows:

\n
// ...\n\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      const content = action.payload\n      state.push({\n        content,\n        important: false,\n        id: generateId()\n      })\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find(n => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important\n      }\n      return state.map(note => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {      return action.payload    }  }\n})\n\nexport const { createNote, toggleImportanceOf, setNotes } = noteSlice.actionsexport default noteSlice.reducer
\n

Let's implement the initialization of notes in the App component. As is usually the case when fetching data from a server, we will use the useEffect hook:

\n
import { useEffect } from 'react'import { useDispatch } from 'react-redux'\nimport NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\nimport { setNotes } from './reducers/noteReducer'import noteService from './services/notes'\nconst App = () => {\n  const dispatch = useDispatch()\n  useEffect(() => {    noteService.getAll().then(notes => dispatch(setNotes(notes)))  }, [dispatch])\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

The notes are fetched from the server using the getAll() method we defined, and then stored in the Redux store by dispatching the action returned by the setNotes action creator. These operations are performed inside the useEffect hook, meaning they are executed when the App component is rendered for the first time.

\n

Let's take a closer look at a small detail. We have added the dispatch variable to the dependency array of the useEffect hook. If we try to use an empty dependency array, ESLint gives the following warning: React Hook useEffect has a missing dependency: 'dispatch'. What does this mean?

\n

Logically, the code would work exactly the same even if we used an empty dependency array, because dispatch refers to the same function throughout the execution of the program. However, it is considered good programming practice to add all variables and functions used inside the useEffect hook that are defined within the component to the dependency array. This helps to avoid unexpected bugs.

\n

Sending data to the backend

\n

Next, let's implement the functionality for sending a new note to the server. This will also give us an opportunity to practice how to make a POST request using the fetch() method.

\n

Let's extend the code in src/services/notes.js that handles communication with the server as follows:

\n
const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  return await response.json()\n}\n\nconst createNew = async (content) => {  const response = await fetch(baseUrl, {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ content, important: false }),  })    if (!response.ok) {    throw new Error('Failed to create note')  }    return await response.json()}\nexport default { getAll, createNew }
\n

Let's take a closer look at the implementation of the createNew method. The first parameter of the fetch() function specifies the URL to which the request is made. The second parameter is an object that defines other details of the request, such as the request type, headers, and the data sent with the request. We can further clarify the code by storing the object that defines the request details in a separate options variable:

\n
const createNew = async (content) => {\n  const options = {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ content, important: false }),  }    const response = await fetch(baseUrl, options)\n  if (!response.ok) {\n    throw new Error('Failed to create note')\n  }\n  \n  return await response.json()\n}
\n

Let's take a closer look at the options object:

\n\n

As with a GET request, the response status code is checked for errors:

\n
if (!response.ok) {\n  throw new Error('Failed to create note')\n}
\n

If the request is successful, JSON Server returns the newly created note, for which it has also generated a unique id. However, the data contained in the response still needs to be converted to JSON format using the response.json() method:

\n
return await response.json()
\n

Let's then modify our application's NoteForm component so that a new note is sent to the backend. The component's addNote method will change slightly:

\n
import { useDispatch } from 'react-redux'\nimport { createNote } from '../reducers/noteReducer'\nimport noteService from '../services/notes'\nconst NoteForm = (props) => {\n  const dispatch = useDispatch()\n  \n  const addNote = async (event) => {    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    const newNote = await noteService.createNew(content)    dispatch(createNote(newNote))  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}\n\nexport default NoteForm
\n

When a new note is created in the backend by calling the createNew() method, the return value is an object representing the note, to which the backend has generated a unique id. Therefore, let's modify the action creator createNote defined in notesReducer.js as follows:

\n
const noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)    },\n    // ..\n  },\n})
\n

Changing the importance of notes could be implemented using the same principle, by making an asynchronous method call to the server and then dispatching an appropriate action.

\n

The current state of the code for the application can be found on GitHub in the branch part6-4.

\n
\n
\n

Exercises 6.14.-6.15.

\n

6.14 Anecdotes and the Backend, step 1

\n

When the application launches, fetch the anecdotes from the backend implemented using json-server. Use the Fetch API to make the HTTP request.

\n

As the initial backend data, you can use, e.g. this.

\n

6.15 Anecdotes and the Backend, step 2

\n

Modify the creation of new anecdotes, so that the anecdotes are stored in the backend. Utilize the Fetch API in your implementation once again.

\n
\n
\n

Asynchronous actions and Redux Thunk

\n

Our approach is quite good, but it is not great that the communication with the server happens inside the functions of the components. It would be better if the communication could be abstracted away from the components so that they don't have to do anything else but call the appropriate action creator. As an example, App would initialize the state of the application as follows:

\n
const App = () => {\n  const dispatch = useDispatch()\n\n  useEffect(() => {\n    dispatch(initializeNotes())\n  }, [dispatch]) \n  \n  // ...\n}
\n

and NoteForm would create a new note as follows:

\n
const NoteForm = () => {\n  const dispatch = useDispatch()\n  \n  const addNote = async (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  // ...\n}
\n

In this implementation, both components would dispatch an action without the need to know about the communication with the server that happens behind the scenes. These kinds of async actions can be implemented using the Redux Thunk library. The use of the library doesn't need any additional configuration or even installation when the Redux store is created using the Redux Toolkit's configureStore function.

\n

Thanks to Redux Thunk, it is possible to define action creators that return a function instead of an object. This makes it possible to implement asynchronous action creators that first wait for some asynchronous operation to complete and only then dispatch the actual action.

\n

If an action creator returns a function, Redux automatically passes the Redux store's dispatch and getState methods as arguments to the returned function. This allows us to define an action creator called initializeNotes in the noteReducer.js file, which fetches the initial notes from the server, as follows:

\n
import { createSlice } from '@reduxjs/toolkit'\nimport noteService from '../services/notes'\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find((n) => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important,\n      }\n      return state.map((note) => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {\n      return action.payload\n    },\n  },\n})\n\nconst { setNotes } = noteSlice.actions\nexport const initializeNotes = () => {  return async (dispatch) => {    const notes = await noteService.getAll()    dispatch(setNotes(notes))  }}\nexport const { createNote, toggleImportanceOf } = noteSlice.actions\nexport default noteSlice.reducer
\n

In its inner function, that is, in the asynchronous action, the operation first fetches all notes from the server and then dispatches the action to add the notes to the store. It is noteworthy that Redux automatically passes a reference to the dispatch method as an argument to the function, so the action creator initializeNotes does not require any parameters.

\n

The action creator setNotes is no longer exported outside the module, since the initial state of the notes will now be set using the asynchronous action creator initializeNotes we created. However, we still use the setNotes action creator within the module.

\n

The component App can now be defined as follows:

\n
import { useEffect } from 'react'\nimport { useDispatch } from 'react-redux'\n\nimport NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\nimport { initializeNotes } from './reducers/noteReducer'\nconst App = () => {\n  const dispatch = useDispatch()\n\n  useEffect(() => {\n    dispatch(initializeNotes())  }, [dispatch])\n\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

The solution is elegant. The initialization logic for the notes has been completely separated from the React component.

\n

Next, let's create an asynchronous action creator called appendNote:

\n
import { createSlice } from '@reduxjs/toolkit'\nimport noteService from '../services/notes'\n\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find((n) => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important,\n      }\n      return state.map((note) => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {\n      return action.payload\n    },\n  },\n})\n\nconst { createNote, setNotes } = noteSlice.actions\nexport const initializeNotes = () => {\n  return async (dispatch) => {\n    const notes = await noteService.getAll()\n    dispatch(setNotes(notes))\n  }\n}\n\nexport const appendNote = (content) => {  return async (dispatch) => {    const newNote = await noteService.createNew(content)    dispatch(createNote(newNote))  }}\nexport const { toggleImportanceOf } = noteSlice.actions\nexport default noteSlice.reducer
\n

The principle is the same once again. First, an asynchronous operation is performed, and once it is completed, an action that updates the store's state is dispatched. The createNote action creator is no longer exported outside the file; it is used only internally in the implementation of the appendNote function.

\n

The component NoteForm changes as follows:

\n
import { useDispatch } from 'react-redux'\nimport { appendNote } from '../reducers/noteReducer'\nconst NoteForm = () => {\n  const dispatch = useDispatch()\n\n  const addNote = async (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(appendNote(content))  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}
\n

The current state of the code for the application can be found on GitHub in the branch part6-5.

\n

Redux Toolkit offers a multitude of tools to simplify asynchronous state management. Suitable tools for this use case are for example the createAsyncThunk function and the RTK Query API.

\n
\n
\n

Exercises 6.16.-6.19.

\n

6.16 Anecdotes and the Backend, step 3

\n

Modify the initialization of the Redux store to happen using asynchronous action creators, which are made possible by the Redux Thunk library.

\n

6.17 Anecdotes and the Backend, step 4

\n

Also modify the creation of a new anecdote to happen using asynchronous action creators, made possible by the Redux Thunk library.

\n

6.18 Anecdotes and the Backend, step 5

\n

Voting does not yet save changes to the backend. Fix the situation with the help of the Redux Thunk library and the Fetch API.

\n

6.19 Anecdotes and the Backend, step 6

\n

The creation of notifications is still a bit tedious since one has to do two actions and use the setTimeout function:

\n
dispatch(setNotification(`new anecdote '${content}'`))\nsetTimeout(() => {\n  dispatch(clearNotification())\n}, 5000)
\n

Make an action creator, which enables one to provide the notification as follows:

\n
dispatch(setNotification(`you voted '${anecdote.content}'`, 10))
\n

The first parameter is the text to be rendered and the second parameter is the time to display the notification given in seconds.

\n

Implement the use of this improved notification in your application.

\n
","frontmatter":{"mainImage":{"publicURL":"/static/a3b7bc3fafcb5b47227616e1343970e5/part-6.svg"},"part":6,"letter":"d","lang":"en"}}},"pageContext":{"part":6,"letter":"d","lang":"en"}},"staticQueryHashes":["3128451518"]}