React is a super fast, reliable Javascript framework for single page applications with responsive UI. React and Redux work perfectly together. Redux is a very flexible immutable state management tool built for performance and customization. Redux helps to keep track of the state and data for React screens and components.<\/p>\n
Setting up Redux<\/a> with React<\/a> could feel like a very confusing and complicated process. There are many packages to install and writing quite a bit of boiler plate code is needed to get redux to do anything. That’s where Redux Toolkit steps in.<\/p>\n Redux Toolkit very is simple to setup, it provides immutable update logic and warnings if your state mutates outside the state. The toolkit allows to merge the state object many levels deep through a proxy by just assigning a value to an object. You no longer need to use spread operator to merge the objects:<\/p>\n Before:<\/p>\n After:<\/p>\n Redux Toolkit provides a very useful feature that allows to create the whole state management in one call and keep all of the logic and actions in the same place. There is no need to separate actions and reducers into separate files.<\/p>\n Instead of:<\/p>\n Now we can do:<\/p>\n createSlice allows us to configure all the actions as functions and define actions as functions and control types of passed functions, which is a must when working with Typescript. With Redux Toolkit, we can create\u00a0 <\/span>a completely type safe state and actions.<\/p>\n Here is an example:<\/p>\n Redux Toolkit is very opinionated framework forcing developers to follow the guidelines and write the code in a similar manner thus simplifying maintenance and training. The Typescript support helps to minimize errors and testing by enforcing concrete types.<\/p>\nstate = {\n user: {\n firstName: 'User',\n lastName: 'Last',\n ...newUser,\n groups: {\n sales: true,\n hr: false,\n admin: false,\n ...newUser.groups\n }\n}<\/pre>\nstate = _.deepMerge(state, newUser);<\/pre>\n
const increment = createAction('INCREMENT')\nconst decrement = createAction('DECREMENT')\n\nconst reducer = createReducer(0, {\n\u00a0 [increment]: state => state + 1,\n\u00a0 [decrement]: state => state - 1\n})<\/pre>\nconst counterSlice = createSlice({\n\u00a0 name: 'counter',\n\u00a0 initialState: 0,\n\u00a0 reducers: {\n\u00a0 \u00a0 increment: state => state + 1,\n\u00a0 \u00a0 decrement: state => state - 1\n\u00a0 }\n})\n\nconst {\n increment,\n decrement\n} = counterSlice.actions;\n\nconst reducer = counterSice.reducer;<\/pre>\nimport { createSlice, PayloadAction } from 'redux-starter-kit';\nimport { CompanyParams } from '..\/..\/schema\/company';\nimport * as StateHelpers from '..\/..\/redux\/stateHelpers';\nimport _ from 'lodash';\n\ninterface CompaniesState {\n\u00a0 companiesStatus: StateHelpers.StateStatusProps,\n\u00a0 activeCompanyId: string,\n\u00a0 companies: CompanyParams[],\n}\n\nconst initialState: CompaniesState = {\n\u00a0 companiesStatus: null,\n\u00a0 activeCompanyId: null,\n\u00a0 companies: [],\n};\n\nconst findIndex = (companies: CompanyParams[], searchId: string) => {\n\u00a0 return _.findIndex(companies, company => {\n\u00a0 \u00a0 return company.id === searchId;\n\u00a0 });\n};\n\nconst companies = createSlice({\n\u00a0 name: 'companies',\n\u00a0 initialState: initialState,\n\u00a0 reducers: {\n\u00a0 \u00a0 updateStatus(state, action: PayloadAction<Partial<StateHelpers.StateStatusProps>>) {\n\u00a0 \u00a0 \u00a0 state.companiesStatus = StateHelpers.updateStatus(state.companiesStatus, action.payload);\n\u00a0 \u00a0 },\n\n\u00a0 \u00a0 saveCompanies(state, action: PayloadAction<CompanyParams[]>) {\n\u00a0 \u00a0 \u00a0 \u00a0 state.companies = action.payload;\n\u00a0 \u00a0 \u00a0 \u00a0 state.companiesStatus = StateHelpers.updateStatus(state.companiesStatus, {status: StateHelpers.StateStatuses.FETCHED});\n\u00a0 \u00a0 },\n\n\u00a0 \u00a0 saveCompany(state, action: PayloadAction<CompanyParams>) {\n\u00a0 \u00a0 \u00a0 const company = action.payload;\n\u00a0 \u00a0 \u00a0 const index = findIndex(state.companies, company.id);\n\u00a0 \u00a0 \u00a0 const companies = _.cloneDeep(state.companies);\n\u00a0 \u00a0 \u00a0 if (index >= 0) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (!_.isEmpty(company.deleted)) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 companies.splice(index, 1);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 companies[index] = company;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 state.companies = companies;\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 else if (company.id && _.isEmpty(company.deleted)) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 companies.unshift(company);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 state.companies = companies;\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 },\n\u00a0 \u00a0 updateCompany(state, action: PayloadAction<Partial<CompanyParams>>) {\n\u00a0 \u00a0 \u00a0 const company = action.payload;\n\u00a0 \u00a0 \u00a0 const index = findIndex(state.companies, company.id);\n\u00a0 \u00a0 \u00a0 const companies = _.cloneDeep(state.companies);\n\u00a0 \u00a0 \u00a0 if (index >= 0) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 companies[index] = {...companies[index], ...company};\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 state.companies = companies;\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 },\n\u00a0 \u00a0 selectCompany(state, action: any) {\n\u00a0 \u00a0 \u00a0 state.activeCompanyId = action.payload;\n\u00a0 \u00a0 }\n\u00a0 }\n});\n\nexport const {\n\u00a0 updateStatus,\n\u00a0 saveCompanies,\n\u00a0 saveCompany,\n\u00a0 updateCompany,\n\u00a0 selectCompany,\n} = companies.actions\n\nexport default companies.reducer;<\/pre>\n