Skip to main content

Session 10: REDUX & MORE ...

🔹 Basic Redux​

1. Theory​

https://redux.js.org/introduction/getting-started

2. Usage with React​

https://react-redux.js.org

3. Diagram​

https://kuanhsuh.github.io/2017/09/28/What-s-Redux-and-how-to-use-it/

4. Install packages: redux, react-redux​

npm install --save redux
npm isntall --save react-redux
npm isntall --save --dev redux-devtools-extension

5. Coding:​

  • actions / types.js (constants)
  • actions / index.js
  • reducers / index.js
  • components
  • root reducers (store.js)
  • store (store.js)
  • App.js (config Provider with store)

6. Debug:​

  • Download tool: add react redux tool (chrome)

🔹 Additional Redux​

7. Redux Thunk​

  • Install: npm install --save redux-thunk
  • Actions: PENDING, SUCCESS, ERROR
  • Async Action (axios / fetch)
  • Config middleware (store.js)

8. Redux Toolkit​

https://redux-toolkit.js.org/introduction/getting-started

9. Redux Saga (Read more)​