I’ve been working with react-redux, and I’m loving it, working with react is awesome, but it can get confusing really fast, so when I was introduced to redux I just instantly loved it. The thing is… when I created an application using , the app had a different syntax than the one I was taught in all the tutorials I saw on youtube, so I started playing around with the default application, and the way they do things there is cleaner and more straight forward. After a quick google search, I realized the default app uses the @redux/toolkit and I wanted to talk about it because it’s pretty great, so… yarn create ract-app --template redux What is @reduxjs/toolkit? From the official GitHub repo: [@reactjs/toolkit] is the official, opinionated, toolset for react-redux, it’s intended to be the standard way to write Redux logic and it’s great at doing its job. It takes a lot of pieces of code that look weird (in my opinion), and make them make more sense. In this article, I’m gonna go 1 by 1 on the APIs included on the toolkit and how to translate from the standard way to do them, as well as a little description of what that action is used for (in case anyone need a refresher 😉). Just before I start, it’s important to say that this toolkit it completely compatible (as far as I know) with the regular syntax, so you can mix them. Create action The actions are the name of the ‘functions’ you are gonna call from the react app to interact with the redux store, they have the name that is gonna be switched on the reducer (we’ll talk about this later), and a payload if one is needed to change the state. createBook = { : , : book }; clearFilter = { : }; createBook(book); clearFilter(); const => book type 'CREATE-BOOK' payload const => () type 'CLEAR_FILTER' //then you can call them This process can create long files, and it adds a lot of boilerplate. The toolkit uses to automatically create the type and receive a single argument that becomes the , it looks like this. createAction action.payload createAction createBook = createAction( ); clearFilter = createAction( ); createBook(book); clearFilter(); import from '@reduxjs/toolkit' const 'CREATE_BOOK' const 'CLEAR_FILTER' // and the you call them We can use the actions created this way when using createReducer but first let’s check what that is. Create Reducer A reducer is the second half to interact with the redux store, if the action is the name, the reducer it’s the process the store is gonna take when it receives the action name, It confused me at the beginning too, but some code and practice solved that, so here we go, usually a reducer it’s a Switch where the action name is switched and then a process it’s started like this: bookReducer = { (action.type) { : [...state, action.payload.book]; : (index === ) { [...state]; } [ ...state.slice( , index), ...state.slice(index + ), ]; : [...state]; } }; const ( ) => state = [], action switch case 'CREATE_BOOK' return case 'REMOVE_BOOK' if -1 return return 0 1 default return The reducer accepts an initial state, in this case, an empty array, and then the action, from where we are gonna extract the type. An important thing to mention is that a standard reducer like this requires you to make reducers where you modify the state itself, for example, you can’t make return state.splice(0,1), because splice modifies the array who’s calling it. This is not the case with createReducerbecause it uses by default, which lets you write mutative code. So we end up with a much simpler: don't immer { createReducer } ; bookReducer = createReducer( [], { : {state.push(action.payload);}, : {state.splice(action.payload, );} }); import from '@reduxjs/toolkit' const CREATE_BOOK ( ) => state, action REMOVE_BOOK ( ) => state, action 1 Also as I mentioned before, if you created the action with you can use them here with computed property syntax: createAction { createReducer, createAction } ; createBook = createAction( ) bookReducer = createReducer( [], { [CREATE_BOOK]: { state.push(action.payload); }, }); import from '@reduxjs/toolkit' const 'CREATE_BOOK' const ( ) => state, action Create Slice This is a big one, with createSliceyou can sort of combine both create actions and create reducer in one big, easy to read (and understand) function, it’s beautiful to watch: { createSlice } ; bookStoreSlice = createSlice(){ : , : [] reducers:{ : { state.push(action.payload); }, : { state.splice(action.payload, );} } } { createBook } = bookStoreSlice.actions; bookReducer = bookStoreSlice.reducer; createBook(book); import from '@reduxjs/toolkit' const name 'bookStore' initialState createBook ( ) => state, action removeBook ( ) => state, action 1 const const //then just call it This piece of code creates the actions and reducers, awesome right?, The only thing we need now it’s a way to give this reducer to a store, and yes, the toolkit has a great way to do just this. Configure Store Usually, you can use createStore to well… create a store and use it in a provider, but if you have multiple reducers you will need to combine them, name them and then use them, like this: { combineReducers, createStore } ; rootReducer = combineReducers({ : bookReducer, : filterReducer, }); store = createStore( rootReducer, initialState,); import from 'redux' const books filter const With the toolkit, you can combine these 2 functions in one, and also add the middlewares you need (this post is already too long, so I’m gonna talk about middlewares sometime later). { configureStore } ; store = configureStore({ : { : bookReducer, : filterReducer } }); import from '@treactjs/toolkit' const reducer books filter Final Thoughts There’s a lot more in the Reactjs/toolkit, but just with these basics, and the ability to write readable code plus mutable code in the states, I just don’t see why not use the toolkit in new or already created applications. The toolkit has an amazing , and it’s maintained constantly. Thank you for taking the time to read this, and I hope it was somewhat useful. See you atthe next one. documentation Previously published at https://medium.com/@yosept.flores/from-react-redux-to-reduxjs-toolkit-42344c9d2832
![Active storage with Azure [A How-To Guide]](https://hackernoon.imgix.net/images/fco3z2j.jpg?auto=format&fit=max&w=3840)
