What is react-redux?
The react-redux package is the official React bindings for Redux. It allows React components to read data from a Redux store, and dispatch actions to the store to update data.
What are react-redux's main functionalities?
Provider Component
The Provider component makes the Redux store available to any nested components that need to access the Redux store.
{"import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './App';
const store = createStore(rootReducer);
const rootElement = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);"}
connect Function
The connect function connects a React component to the Redux store. It can map state and dispatch to the props of the component.
{"import { connect } from 'react-redux';
import { increment, decrement } from './actionCreators';
function Counter({ count, increment, decrement }) {
return (
<div>
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
);
}
const mapStateToProps = state => ({
count: state.count
});
const mapDispatchToProps = {
increment,
decrement
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);"}
useSelector Hook
The useSelector hook allows you to extract data from the Redux store state, using a selector function.
{"import { useSelector } from 'react-redux';
function MyComponent() {
const data = useSelector(state => state.data);
return <div>{data}</div>;
}"}
useDispatch Hook
The useDispatch hook returns a reference to the dispatch function from the Redux store. You can use it to dispatch actions.
{"import { useDispatch } from 'react-redux';
import { myAction } from './actionCreators';
function MyComponent() {
const dispatch = useDispatch();
return (
<button onClick={() => dispatch(myAction())}>Dispatch Action</button>
);
}"}
Other packages similar to react-redux
mobx-react
MobX-react is a package that provides React bindings for MobX. MobX is a state management library that uses observables to reactively update the UI when state changes. It is conceptually different from Redux and does not use a single store or reducers, but it provides a similar capability to reactively manage state in a React application.
zustand
Zustand is a small, fast, and scalable bearbones state-management solution using simplified flux principles. It is not tied to React and does not use reducers; instead, it works with a mutable state and provides a simple and intuitive API. It's more straightforward than Redux and can be an alternative for smaller applications or for developers who prefer a less boilerplate code approach.
recoil
Recoil is a state management library for React developed by Facebook. It provides several capabilities similar to Redux, such as shared state between components, but it uses a different approach based on atoms (units of state) and selectors (pure functions to derive state). Recoil works with React's concurrent mode out of the box and is meant to be more efficient and easier to use with React's functional components.
context-state
Context-state is a library that leverages the React Context API to manage state. It is a simpler alternative to Redux that might be suitable for applications with a less complex state management requirement. It does not have middleware or the same level of devtools support as Redux, but it can be a lightweight solution for simpler use cases.
React Redux
Official React bindings for Redux.
Performant and flexible.
![redux channel on slack](https://img.shields.io/badge/slack-redux@reactiflux-61DAFB.svg?style=flat-square)
Installation
npm install --save react-redux
React Redux requires React 0.13 or later.
React Native
What you get from react-redux
is for React.
For React Native, import from react-redux/native
instead.
Documentation
License
MIT