React Redux Example

Basics:

• Redux provides means to create an empty store where application state can be manufactured.
• You tell the store what to create as the application state, how to update the application state thru reducer.
• Reading from the application state in application is straight forward.
• Updating the application state is by triggering the update logic in the store by dispatching the actions.
• NOTE: When you update a state, you don’t update the state but rather create a new state out of old state.

• react-redux provides couple of additional facilities, Provider and connect.
• Provider to provide the store to the root component.
• Connect passes state, dispatch actions to child component. 

Example:

• npx create-react-app reduxexample
• cd reduxexample
• npm install redux
• npm install react-redux
• Remove all files under src folder and public folder
• Create index.html under public folder
• Create rest of the files under src folder
• npm start

index.html

index.js

reducer.js

dispatcher.js

kitchen.jsx

Menu.jsx

App.jsx