To demonstrate the workings of Redux, we’re going to make a simple SPA to show how we can manage data in Redux and present the data using React. To set up, run the following commands in the terminal:
We’ve just cloned a starter template for what we’ll be building in this section. It’s set up react and downloaded the Redux and react-redux npm packages. We’ll be building an application that allows us to take short notes as To-do items or keywords that remind of something.
Actions are plain JavaScript objects that must have a type, and reducers determine what to do based on specified action. Let’s define constants to hold the different actions. Create a new file called types.js in ./src/actions with the following content:
[…]
This is a smart component (or container) that calls fetchItems() action creator once the component is loaded. We’ve also used the connect function to link the application state in Redux to our React component. This is achieved using the function mapStateToProps which takes in the Redux state tree object as an input parameter and maps a piece of it (items) to props of the React component. This allows us to access it using this.props.items. The remainder of the file allows us to accept user input and add it to the application state. Run the application using npm start and try adding a few items, like in the image below:
[…]
