Discussion on: Redux Best Practice 2021 - Redux Cool

[Mark Erikson]

Hi, I'm the primary Redux maintainer. We already have an official Redux Toolkit package that does all of this same functionality already (generating action types/action creators, reducers that use Immer, etc), as well as additional features. It's also written in TypeScript and designed for a good TS usage experience. You should really be using Redux Toolkit instead:

import { createSlice } from '@reduxjs/toolkit'

const initialState = []

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    todoAdded(state, action) {
      // ✅ This "mutating" code is okay inside of createSlice!
      state.push(action.payload)
    },
    todoToggled(state, action) {
      const todo = state.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    },
})

export const {todoAdded, todoToggled} = todosSlice.actions
export default todosSlice.reducer

See redux.js.org/tutorials/fundamental... for some examples of migrating existing Redux logic to RTK, and redux.js.org/tutorials/essentials/... for a larger tutorial that demonstrates building a "real-world" app with RTK.

[wkrueger]

WTF happened here, someone created a dev.to profile impersonating React, then posted THIS.

Community work been hard these days.

[Mark Erikson]

Yipes, no kidding. I don't think they had that username when they posted the story, so maybe they renamed their account? Flagged and reported for spam.

[React JS Fan]

@mark
It's not the same redux-toolkit, there is not even a feature similar to redux-toolkit ․ I will explain now․

1. Nested reducers tree capability

In redux-cool we can build our reducerTree with any deep and nested structure ․ which redux-toolkit cannot do. For example

const reducerTree = {

    PROFILE: {

        SET: (state, action) => {
            const [data] = action.args
            state.profile.data = data
        },

        UPDATE_EMAIL: (state, action) => {
            const [email] = action.args
            state.profile.data.email = email
        }
    },

    CLEAR: (state, action) => {
        state.profile.data = null
    }

}

2. Ability to create actions independent of the reducer

For example:

import {actionsCreator} from "redux-cool"

const first_action = actionsCreator.MY.FIRST.ACTION("arg1", "arg2")
console.log(first_action)
//      {
//          type: "MY/FIRST/ACTION",
//          args: ["arg1", "arg2"],
//          cb: f() identity,
//          _index: 1
//      } 


const second_action = actionsCreator.This.is.my.second.action(2021)
console.log(second_action)
//      {
//          type: "This/is/my/second/action",
//          args: [2021],
//          cb: f() identity,
//          _index: 2
//      } 

3. Actions With Callback capability

For example:

import {actionsCreator} from "redux-cool"


const my_callback = () => {
    console.log("Hello, I am callback!!!")
}

const callbackable_action = actionsCreator.CALLBACKABLE.EXAMPLE(1, 2, 3, my_callback)

console.log(callbackable_action)
//      {
//          type: "CALLBACKABLE/EXAMPLE",
//          args: [1, 2, 3],
//          cb: f() my_callback,
//          _index: 1
//      }

callbackable_action.cb()
//      "Hello, I am callback!!!"

4. See: here