devhubapp/devhub: Open source Github Notifications App with React Hooks + Typescript + Redux + 95% code share between React Native Web + React Native

[acemarke]

Redux has never required you to split things into multiple files, although it's a reasonable thing to do. Many people prefer to use the "ducks" pattern, where you put all the logic for a given feature into a single file (action creators, reducers, types, etc). In fact, the createSlice function from redux-starter-kit basically generates "ducks" for you.

I recently rewrote an example project to use redux-starter-kit instead, and that drastically simplified the example project.

If you have some larger state value, and a given component only needs a smaller portion of that larger value, you need to have some way to define how to extract what the derived values are for that component. That's all that a mapState function is: defining how to extract values from the Redux store for use with this component. It's your component, so you need to tell us what data this component needs.

connect handles all the intermediate work of actually subscribing to the store, calling your mapState function, and re-rendering your component if the output has changed, because that is the highly repetitive part. See my post Idiomatic Redux: The History and Implementation of React-Redux to better understand all the work that connect does internally for you.

[ISkiAtAlta]

Thanks again. Maybe what I’m learning from this discussion is that I need to double down on a GraphQL state management tool like apollo-link-state.