You can check the reference repository to see how this looks in a real project. This is where our feature handles its side effects, such as catching some Redux actions and dispatching new ones, Usually it contains support utilities and helpers. utils.jsĮverything related to your feature that doesn’t belong anywhere else. Multiple input-selectors and add some business logic or do some transformations. Input selectors that only retrieve data from the state and combined selectors that can combine I strongly recommend dividing the selectors into two categories. If you’re not familiar with the concept, I highly recommend lookingĪt the reselect library. Selectors are pure functions that compose and know how The file where you define your selectors. This is also a place where you compose the reducers of your possible sub-features using combineReducers. The file where your reducers are defined. If you don’t know what is the difference between the componentsĪnd containers you should read this articleįrom Dan Abramov why this separation exists and why it is necessary. The directory where your containers live. The directory where your components live. The standard feature directory has a prescribed structure that usually looks like this: I will demonstrate what a standard feature is in an example Todo List. You can imagine a standard feature as a directory that lives in your codebase. Later we’ll cover creating reusable feature instances whichĬan be mounted with different state at different locations.
I will start by explaining how I approach It was written by Developer1 or Developer2.įor the purpose of this article, I’ve implemented all the patterns that we will be talking about in this repository.įeel free to clone it and then run it using npm run start. Over and over so that every part of the codebase looks the same regardless whether What do I mean by standard and prescribed ? Applying the same patters/rules Today I’d like to talk about how to create features in React+Redux application in standardĪnd prescribed way. With redux-observable it has really become something special. The nightmare of state management became a delightful experience and after I started handling my side effects
It introduced me to the concepts of Functional and Reactive programmingĪnd showed me how easy and maintainable the development of a large scale Single Page Applications can be. Since then it has changed the way I think. I’ve started writing applications in React and Redux more than two years ago. Back to Articles Creating reusable features in React + Redux
0 kommentar(er)
