So whilst wiring up my the frontend CRUD buttons to the backend routes in this project that I am currently working on, I realized I needed to implement a simple flux architecture to manage global state. However, I haven’t used Redux in a while, and based on my experience, setting up reducers, and their various dispatch statements, was rather tedious, especially for a small project, so I decided to google what alternatives to Redux was there. ...
Step 1: Install Redux & react-redux, and redux-thunk npm install redux npm install react-redux npm install redux-thunk Step 2: Think about what states you want your store to have For my case, it was: 1 2 3 4 5 { streams: [{},{}] trades: [{},{}] globalNominalDenom: 'SGD' } Step 3: Taking stock of ways Database data and store data is interacted with There are three broad functions you’re trying to achieve, what I call, the right hand, left hand, and the reducers. Right hand is in charge of getting state from database. Left hand is in charge of ‘pushing’ state to store via dispatch. With the help of redux-thunk, you essentially combine these two functions together into the definition of action creators. ...
Basic Idea of Multiple States Quite naturally, the store within Redux should be able to store multiple kinds of states. Consider the following state: 1 2 3 4 5 6 7 { notes: [ { content: 'reducer defines how redux store works', important: true, id: 1}, { content: 'state of store can contain any data', important: false, id: 2} ], filter: 'IMPORTANT' } On a top level, Redux architecture allows us access to a ‘global’ state. Each state is a property within the Redux store. ...
Okay this will be a summary of very important concepts that I’ve learned, which is the Flux architecture. The core idea is this. There are three interconnected primitives within the flux architecture for state management. First, there is the reducer. A reducer is a function that takes in a state variable (similar to the ‘useState’ function), but in addition, also takes in an action variable. An action is simply an object that contains information regarding the user’s action, to be enacted on the state. A common definition within action object is the action.type property. ...