Model & Controllers
Cook and manage DApp's states by Redux Toolkit.
Single model - Multiple controllers
Typically, the model always has a single file that is to merge all the controllers' states into the store.
// model/index.ts
import { configureStore } from '@reduxjs/toolkit'
import { devTools, bigintSerializationMiddleware } from 'shared/devTools'
import main from 'app/model/main.controller'
/**
* Isolated store
*/
const model = configureStore({
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware(bigintSerializationMiddleware),
devTools: devTools(process.env.REACT_APP_ID as string),
reducer: {
main,
},
})
export type AppState = ReturnType<typeof model.getState>
export type AppDispatch = typeof model.dispatch
export default model
Following the template, your DApp's state is isolated in a store named
myapp. If you installed Redux Devtool, you are able to inspect the myapp states clearly.
The isolated states of myapp.
Additionally, the model will merge all states in
reducer (i.e. main is the current state declared in the reducer) which are exported from controllers. To import a new state, you merely need to add the state into the reducer.Controllers typically are to fetch raw data, process it to good forms, and export it to the model.
// main.controller.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
/**
* Interface & Utility
*/
export type State = {
counter: number
}
/**
* Store constructor
*/
const NAME = 'main'
const initialState: State = {
counter: 0,
}
/**
* Actions
*/
export const increaseCounter = createAsyncThunk<State, void, { state: any }>(
`${NAME}/increaseCounter`,
async (_, { getState }) => {
const {
main: { counter },
} = getState()
return { counter: counter + 1 }
},
)
/**
* Usual procedure
*/
const slice = createSlice({
name: NAME,
initialState,
reducers: {},
extraReducers: (builder) =>
void builder.addCase(
increaseCounter.fulfilled,
(state, { payload }) => void Object.assign(state, payload),
),
})
export default slice.reducer
By the example, the name and struct of the state had been assigned at lines 15, 16. The function
increaseCounter is to compute and return the next state partially which will mutate the current state in slice (i.e. line 38 to build a state and line 44 to catch the next state from increaseCounter).Last modified 1yr ago