Использовать Провайдер для подключения Redux к действию
В последней задаче вы создали хранилище Redux для обработки массива сообщений и создали действие для добавления новых сообщений. Следующим шагом будет предоставление доступа React к хранилищу Redux и действия, необходимые для отправки обновлений. React Redux предоставляет пакет react-redux
для выполнения этих задач. React Redux предоставляет небольшой API с двумя ключевыми функциями: Provider
и connect
. Другая проблема connect
. Provider
- это оболочка из React Redux, которая обертывает ваше приложение React. Затем этот обертку позволяет вам получить доступ к функциям store
Redux и функции dispatch
во всем дереве компонентов. Provider
берет два реквизита, магазин Redux и дочерние компоненты вашего приложения. Определение Provider
для компонента приложения может выглядеть так:
<Магазин-провайдер = {store}>
<Приложение />
</ Provider>
The code editor now shows all your Redux and React code from the past several challenges. It includes the Redux store, actions, and the DisplayMessages
component. The only new piece is the AppWrapper
component at the bottom. Use this top level component to render the Provider
from ReactRedux
, and pass the Redux store as a prop. Then render the DisplayMessages
component as a child. Once you are finished, you should see your React component rendered to the page.
Note: React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant Provider
for you to use in the AppWrapper
render method.