Querying your Redux store with GraphQL

Using Apollo Client’s InMemoryCache and Local Resolvers, it’s possible to have it query your Redux store: import store from "./Store"; const typeDefs = gql` type Query { users: [User] } type User { groups: [Group] } type Group {} `; const client = new ApolloClient({ cache: new InMemoryCache(), typeDefs, resolvers: { Query: { users: () …

React Redux with hooks

Jennifer Williams shows us how use Redux with Hooks When I was first learning Redux I found all the moving parts and files incredibly hard to wrap my head around. Surprisingly, React hooks made the process of using Redux a lot easier for me. The post provides us with a two-fold example. One “without hooks” …

Redux in 30 lines of PHP

To get the full details behind Redux, Sorin Nunca has recreated it using PHP: As I usually try to understand the tools I’m using, the following tries to be a toy implementation of Redux in PHP, in the hopes of gaining a deeper understanding of the concepts behind Redux. Also covers combineReducers. Redux in 30 …

How to Implement Redux in 24 Lines of JavaScript

90% convention, 10% library In this post Yazeed Bzadough walks you through creating your own Redux implementation. // simplified createStore function const createStore = (yourReducer) => { let listeners = []; let currentState = yourReducer(undefined, {}); return { getState: () => currentState, dispatch: (action) => { currentState = yourReducer(currentState, action); listeners.forEach((listener) => { listener(); }); …

Manage React State with zustand

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn’t boilerplatey or opinionated, but still just enough to be explicit and flux-like. import create from 'zustand' const [useStore] = create(set => ({ count: 1, inc: () => set(state => ({ count: state.count + 1 })), dec: () => set(state …

Inspecting Redux Stores in Production, without the Redux Devtools

Checking out the Redux Store of Soundcloud Redux Back in the day I learnt a lot by hitting CTRL+U (View Source) on websites. Nowadays I still check the source code of some apps, yet it’s become a tad more difficult for some specific things. When it comes to React apps that use Redux I like …

10 Redux tips to scale your dev team

Recently I landed a gig at a company to help their team out with their React work (using Redux). This list of tips – save for number 10 – resonates quite well with what I’ve been introducing there: Plan 1 day of training per developer dedicated to Redux Integrate Redux-dev-tools as early as possible Use …

How to use Redux in highly scalable JavaScript applications

Alexis Mangin: I have recently worked on the first version of a React-Native mobile app for one of my clients, which desired to architecture the app in a scalable way for a painless experience to add new features later. I believe we should always think about app architecture that way as it can always scale …

Scaling your Redux App with ducks

It’s one of these things I too keep struggling with from time to time: do you organize your project files per type/functionality, or per feature? Alex Moldovan from FortechRomania: Our approach starts from the need to isolate the React code into a single folder — called views — and the redux code into a separate folder — called redux. Inside the …