React and Redux: fundamental and advanced

June 2021

🔨 Application displaying articles from New-York Times using Redux, Hooks and Context API. From udemy 'Reactv16 & intégration Redux : fondamentaux et avancé - Sandy Ludosky'.

Demo on Heroku.

Subjects covered

• Fetch API
• Redux (store and data flux)
• Redux-thunk (async-await)
• Redux hooks
• Combine reducers
• Context API (Provider, Consumer, Value)

Redux

Redux is a predictable state container for JavaScript apps. It’s a « state container » because it holds all the state of your application. It doesn’t let you change that state directly, but instead forces you to describe changes as plain objects called « actions ». Actions can be recorded and replayed later, so this makes state management predictable. With the same actions in the same order, you’re going to end up in the same state. (Dan Abramov)

Actions

Actions are JavaScript objects that use type property to inform about the data that should be sent to the store.

Reducers

While actions only trigger changes in the app, the reducers specify those changes. The reducer is a function that takes two parameters (state and action) to calculate and return an updated state.

Store

The store is a place that holds the app's state.

Context API

Context API is a React API that can solve a lot of problems that modern applications face related to state management and how they’re passing state to their components. Instead of installing a state management library in your project that will eventually cost your project performance and increase your bundle size, you can easily go with Context API and be fine with it.

Test localy

• npm install

• npm run start

Note: You will need to provide your own NYT API key in the .env file.

Dependancies

• redux: Redux is a predictable state container for JavaScript apps.

npm i redux

• react-redux: Official React bindings for Redux.

npm i react-redux

• redux-thunk: Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

npm i redux-thunk

Useful links

• Getting Started with Redux
• Developing modern offline apps with ReactJS, Redux and Electron – Part 3 – ReactJS + Redux
• The New York Times Developer Network
• Redux
• Utiliser Redux avec React JS
• Build fast, responsive sites with Bootstrap
• Flat UI Color 2
• Provider Pattern with React Context API
• Introduction de la context API