How to use Traditional Redux Approach In Redux
Involves defining actions, action creators, and reducers separately, leading to verbose code and manual state management.
Approach:
- Involves defining action types, action creators, and reducers separately, leading to fragmented code organization.
- Requires writing repetitive code for defining actions, action creators, and reducers.
- Store setup involves creating a Redux store manually using
createStorefrom Redux. - Dispatching actions requires accessing the store and dispatching actions using
store.dispatch().
Example: This example uses the traditional redux approach to justify the above title.
/* App.css */
button {
margin: 10px;
}
// src/actions/actions.js
export const increment = () => ({
type: 'INCREMENT'
});
export const decrement = () => ({
type: 'DECREMENT'
});
// src/reducers/reducers.js
const initialState = {
count: 0
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + 1
};
case 'DECREMENT':
return {
count: state.count - 1
};
default:
return state;
}
};
export default counterReducer;
// src/store/store.js
import { createStore } from 'redux';
import counterReducer from '../reducers/reducers';
const store = createStore(counterReducer);
export default store;
// src/app.js
import './App.css';
import Counter from './counter';
function App() {
return (
<div className="App">
<Counter/>
</div>
);
}
export default App;
// src/counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions/actions';
const Counter = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Step to Run Application: Run the application using the following command from the root directory of the project
npm start
Output: Your project will be shown in the URL http://localhost:3000/
How does Redux Toolkit simplify Redux development?
Redux is a powerful state management library for JavaScript applications, but setting it up and managing boilerplate code can be cumbersome. Redux Toolkit is an official package from the Redux team designed to streamline Redux development and reduce boilerplate code. In this article, we’ll explore how Redux Toolkit simplifies Redux development and improves developer productivity.