Ever since feature was announced and the API went public, I have been thinking about what this means for — a well known state management library. For quite some time there have been voices shouting that we don’t need , we can achieve the same with . Well, I think of as more of a pattern than a library. After a day playing with , I was able to implement this pattern using and . I will show you how to make your own wrapper and hook. Oh, and it’s fully typed in . React Hooks Redux Redux React Context Redux React Hooks context hooks Provider useRedux TypeScript Provider First, we create a for our state and actions. Let’s create a function called that will have 2 parameters: root reducer and initial state of application, so we can pass them to hook. Provider initRedux useReducer const [state, dispatch] = useReducer(rootReducer, initialState) This hook will give us object and function. Those two should be accessible in the entire application. The best way to achieve this is by passing them down the component tree with , one context for each. state dispatch React Context const StateContext = React.createContext(null)const DispatchContext = React.createContext(null) Our method creates a that already contains providers for these two contexts. initRedux Provider With this you can wrap your entire application and have your application state and dispatch function available in every component. But how can we use them in our components? Provider useRedux One of the great advantages of hooks is their ability to compose. You can make your own hook which use another hooks. As long as you obey the , you can play with them in any way you want. Rules of Hooks As I said, we need to have access to the application state and be able to dispatch our actions. To make things a little more convenient, I decided to use an interface very similar to the one used by function from . If you are not familiar with it, definitely check it, it’s very useful. connect React-Redux So, our hook will take 2 arguments called and (as parallel to and ). useRedux extractState actionMap mapStateToProps mapDispatchToProps First, we retrieve both contexts. const appState = React.useContext(StateContext)const dispatch = React.useContext(DispatchContext) Of course we don’t want to return the entire state of application but instead, we use function from arguments to… well, extract the desired portion of state. extractState const stateExtract = extractState(appState) That part was easy. A consumer of already provided a function that takes the application state as an argument and selects only relevant values. Now we need to take the argument and do some mapping magic. Assuming that is an object with a shape , let’s bind a function to those action creators. useRedux actionMap actionMap {key: myActionCreator} dispatch The code iterates through keys in the object and replaces it’s values (action creators) with functions that directly dispatch actions returned by those action creators. With one simple modification, we can dispatch also . Just add one condition: actionMap thunks const fn = (...args) => {const action = actionCreator(...args)if (typeof action === 'function') {action(dispatch, () => appState)} else {dispatch(action)}} Now all we need to do is to return and from our custom hook. A complete function looks like this. stateExtract actions initRedux In about 40 lines of code you can create your own and custom hook. I did so, typed it all with TypeScript and published it as package to npm. You can , if you want, but be aware that this is just an experiment and it’s definitely Provider useRedux redoox try and play with it not suitable for production! There is already quite a number of packages trying to achieve the same. There’s even from Facebook incubator. I think it would be nice to not have gazillion packages trying to solve the same problem with slightly different API. If you know about one that has a fair chance to become “the official one”, let me know in the comments. I will gladly help implementing it. one Now, let’s take a look at how good a developer experience can be thanks to typed interface. How does it work? The usage is very simple. As an example, I created simple application that loads users from REST API, displays them and you can increment/decrement their age. Create an application state 2. Implement action creators 3. Implement reducer. I’m using the library to ensure immutability. immer Notice, how you can hardly make a mistake while accessing the action payload. 4. Implement selectors. I’m using the library. reselect 5. Create a store. 6. And finally, use the hook in a component. If all interfaces are typed properly, you will always know what part of state you extracted and what actions are available. You can find a full example . Just clone a repository, then , and . here yarn yarn build yarn start I came across many different state management patterns throughout my career as a software developer and not just those for React /JavaScript. So far, I like Redux the most. It’s predictable, maintainable and easily testable. Those are the attributes that really matter to me with regard to application’s data layer. It would be great if we could make it work with React Hooks on larger scale. Thanks for reading. If you a have a question or an interesting idea, please, share it in the comments section.

Too Long; Didn't Read

Making security fun one episode at a time

useRedux — state management pattern with React Hooks

Too Long; Didn't Read

Jakub Šoltés

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

useRedux — state management pattern with React Hooks

Too Long; Didn't Read

Jakub Šoltés

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES