ReactJS Redux
React Redux is a popular library that helps manage state in a React application. It provides a way to share state across different components of a React app, making it easier to build complex, data-driven applications.
Here is a high-level overview of how React Redux works:
The store: The store is an object that contains the state of your application. It is created using the
createStore
function from theredux
library. The store is responsible for holding the current state of your application and dispatching actions to update the state.Actions: Actions are payloads of information that send data from your application to the store. They are objects that contain a
type
field, which specifies the type of action being performed, and an optionalpayload
field, which contains any additional data needed for the action.Reducers: Reducers are pure functions that take in the current state of the store and an action, and return a new state. They are responsible for updating the store based on the action that has been dispatched.
The
Provider
component: TheProvider
component is a higher-order component provided by thereact-redux
library that makes the store available to all components in the application. It wraps the root component of your app and allows you to pass the store as a prop to your components.The
connect
function: Theconnect
function is a higher-order component provided by thereact-redux
library that connects a React component to the store. It allows you to specify which parts of the store your component needs access to, and provides the store data to your component as props.
Here is an example of how you might use these concepts to build a simple to-do list app with React and Redux:
- Create the store:
import { createStore } from 'redux';
const initialState = { todos: [], };
function todoReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TODO': return { ...state, todos: [...state.todos, action.payload], };
default: return state;
}
}
const store = createStore(todoReducer);
- Create an action:
function addTodo(text) {
return {
type: 'ADD_TODO', payload: text,
};
}
- Create a component that dispatches an action:
import { connect } from 'react-redux';
function AddTodoForm(props) {
const [text, setText] = useState('');
function handleSubmit(event) {
event.preventDefault();
props.dispatch(addTodo(text));
setText('');
}
return ( <form onSubmit={handleSubmit}>
<input value={text} onChange={event => setText(event.target.value)} />
<button type="submit">Add Todo</button> </form>
);
}
export default connect()(AddTodoForm);
- Create a component that displays the to-do list:
import { connect } from 'react-redux';
function TodoList(props) {
return ( <ul> {
props.todos.map(todo => ( <li key={todo}>{todo}</li> ))} </ul>
);
}
function mapStateToProps(state) {
return { todos: state.todos, };
}
export default connect(mapStateToProps)(TodoList);
- Wrap the root component with the
Provider
component:
import { Provider } from 'react-redux';
function App() {
return ( <Provider store={store}>
<AddTodoForm />
<TodoList />
</Provider>
);
}
Now, whenever the AddTodoForm
component dispatches the ADD_TODO
action, the reducer will update the store with the new to-do item, and the TodoList
component will re-render with the updated list of to-dos.