How to: Use Redux in Oracle JET

Want to use redux for state management? I will guide you step by step on how to start using Redux in your JET app today. Code references used here can be found in my GitHub

Installing

npm install redux

Use npm to install the latest version of redux. In addition if you want to use redux-thunk as middleware, run the below command to install the latest.

npm install redux-thunk

Setup: main.js and path_mapping.json

You need to tell JET how to copy the redux and redux-thunk dependencies into js/libs so that your main.js could configure the the requirejs paths. Make an entry for the two dependencies in you path_mapping.js like below.

Configure the requirejs paths for the dependencies like below

Setup: Store

Create the redux store config under src/js/state . the store config and our root reducer will be present in this file. you can move your reducer(s) to a separate file if you want.

Setup: Actions

Setup your sync or async actions in this file. The below sample shows how to fetch LOVs and dispatch actions to the store with the values received.

Dispatch and Subscribe to store

Perform dispatch action on store and subscribe to the store changes in your viewModels.

You have configured redux in you app 🎉