11.2K ·GitHub
What is this?
Redux Toolkit is the official, opinionated toolset for writing Redux logic, bundling the standard patterns (store setup, reducers, actions, async logic, normalized data) into a small set of APIs so you don't have to hand-write boilerplate.
Redux Toolkit is the official, opinionated toolset for writing Redux logic, bundling the standard patterns (store setup, reducers, actions, async logic, normalized data) into a small set of APIs so you don't have to hand-write boilerplate.Is this a standalone state manager or does it still need Redux?It's a library that wraps and extends Redux itself, not a replacement. It's the recommended way to write Redux logic, including a built-in data fetching layer called RTK Query.
It's a library that wraps and extends Redux itself, not a replacement. It's the recommended way to write Redux logic, including a built-in data fetching layer called RTK Query.How do I add it to an existing app?Install it as an NPM package for use with a bundler or Node, or start fresh with the official Redux Toolkit + TS template for Vite or Next's with-redux template, both preconfigured with React-Redux.
Install it as an NPM package for use with a bundler or Node, or start fresh with the official Redux Toolkit + TS template for Vite or Next's with-redux template, both preconfigured with React-Redux.Do I need React to use it?No, Redux Toolkit itself is framework-agnostic (it's used alongside React-Redux for React apps), and there's also a precompiled ESM build that can be loaded directly via a script tag in the browser.
No, Redux Toolkit itself is framework-agnostic (it's used alongside React-Redux for React apps), and there's also a precompiled ESM build that can be loaded directly via a script tag in the browser.What does it deliberately not handle?It's scoped narrowly: it doesn't prescribe reusable encapsulated Redux modules, folder/file structure conventions, or how to manage entity relationships in the store.
It's scoped narrowly: it doesn't prescribe reusable encapsulated Redux modules, folder/file structure conventions, or how to manage entity relationships in the store.What is RTK Query?RTK Query is an optional data-fetching and caching layer built into the package on top of Redux Toolkit's core, letting you define API endpoints with createApi() instead of hand-writing fetch/caching logic.
RTK Query is an optional data-fetching and caching layer built into the package on top of Redux Toolkit's core, letting you define API endpoints with createApi() instead of hand-writing fetch/caching logic.What's the main API for defining reducers and actions together?createSlice() combines createReducer() and createAction(): you give it a name, initial state, and reducer functions, and it generates the slice reducer plus matching action creators and types automatically.
createSlice() combines createReducer() and createAction(): you give it a name, initial state, and reducer functions, and it generates the slice reducer plus matching action creators and types automatically.How does configureStore simplify setting up a Redux store?configureStore() wraps the original createStore with simplified options, auto-combining slice reducers, adding supplied middleware, including redux-thunk by default, and enabling the Redux DevTools Extension out of the box.
configureStore() wraps the original createStore with simplified options, auto-combining slice reducers, adding supplied middleware, including redux-thunk by default, and enabling the Redux DevTools Extension out of the box.How do I write immutable updates without switch statements?createReducer() lets you supply a lookup table of action types to reducer functions, and it uses Immer internally so you can write normal-looking mutative code like 'state.todos[3].completed = true'.
createReducer() lets you supply a lookup table of action types to reducer functions, and it uses Immer internally so you can write normal-looking mutative code like 'state.todos[3].completed = true'.What are similar projects?dva, redux-saga, redux-persist, react-boilerplate, reactotron, redux-devtools, TypeScript-React-Starter, redux
dva, redux-saga, redux-persist, react-boilerplate, reactotron, redux-devtools, TypeScript-React-Starter, reduxWhich topics is it in?redux-saga, redux, frontend-framework, state-management, react, npm, frontend, nodejs, library, typescript, javascript, web
redux-saga, redux, frontend-framework, state-management, react, npm, frontend, nodejs, library, typescript, javascript, web