Redux Toolkit
Redux Toolkit
Redux Toolkit is the official, recommended way to write Redux logic, significantly reducing boilerplate code compared to traditional Redux while enforcing best practices by default.
Installing Redux Toolkit
bash
npm install @reduxjs/toolkit react-redux
Creating a Slice
A slice combines the reducer logic and actions for a specific piece of state into a single file using the createSlice function.
javascript
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
},
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
Configuring the Store
javascript
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({
reducer: { counter: counterReducer },
});
Providing the Store to Your App
javascript
import { Provider } from 'react-redux';
function App() {
return (
);
}
Using State in Components
javascript
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';
function Counter() {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
Why Redux Toolkit is Recommended
Redux Toolkit simplifies store setup, reduces boilerplate through createSlice, and includes Immer internally, allowing you to write state updates that appear mutable while remaining safely immutable behind the scenes.
Conclusion
Redux Toolkit is now the standard way to implement Redux in modern React Native applications, offering a dramatically simplified developer experience compared to traditional Redux setup.
