The react-redux
package, the official Redux-UI binding package for React, lets your React components interact with a Redux store without writing the interaction logic yourself. This allows an application to rely on Redux to manage the global state and React to render the UI based on the state.
Interactions may include reading data from a Redux store and dispatching actions to the store.
The react-redux
package is added to a React/Redux project by first installing it with npm
.
A few of the resources imported from react-redux
are:
Provider
useSelector
useDispatch
npm install react-redux
The <Provider />
component makes the Redux store available to a nested child component. The store should be passed in as the store
prop.
All child components of the <Provider />
component can now use the resources provided by react-redux
to access the Redux store including retrieving data and dispatching actions.
import React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import { App } from './App';import { createStore } from 'redux';const store = createStore();ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root'));
The useSelector()
hook extracts state data from the Redux store using a selector function each time the state is updated. Any component nested within <Provider />
may access state using useSelector()
. Selectors used with useSelector()
can be pre-defined functions or inline selectors.
When called within a React component useSelector(selector)
accomplishes two things:
import React from 'react';import { useSelector } from 'react-redux';// Pre-defined selector functionconst selectPosts = state => state.posts;const App = (props) => {const posts = useSelector(selectPosts);// Alternatively, selectors can be used inline// const posts = useSelector(state => state.posts);// code to render posts is omitted...};
The useDispatch()
hook returns a reference to the store.dispatch()
method. It must be used within a React component that is nested within the <Provider />
component.
By convention, a React component defines dispatch
and assigns the reference returned by useDispatch()
. dispatch()
can then be used within the component to dispatch action objects.
import React from 'react';import { useDispatch } from 'react-redux';const MyComponent = () => {const dispatch = useDispatch();return (<buttononClick={() => dispatch({ type: 'buttonClicked' })} >Click Me</button>);};
In Redux, selectors are user-defined functions that extract specific pieces of information from a store state value. Selectors are pure functions that take the state
as an argument and React components can use selectors to get specific data from the store.
By convention selector function names start with select
and describe the data they retrieve from the store.
/*state = {todos: [{id: 1, content: 'Work'},{id: 2, content: 'Shop'},{id: 3, content: 'Sleep'}]}*/// This selector retrieves the todos array.const selectTodos = state => state.todos;// This selector retrieves an array of todo ids.const selectTodoIDs = state => state.todos.map(todo => todo.id);