Правильный способ добавления данных в Redux и их вывода в компоненте с помощью react-redux включает несколько шагов:
1. Создайте действие (action) для добавления данных в Redux. Например, вы можете создать файл `bookActions.js` и определить в нем функцию `addBook`, которая будет принимать данные книги и возвращать объект действия. Например:
```javascript
// bookActions.js
export const addBook = (book) => {
return {
type: "ADD_BOOK",
payload: book
};
};
```
2. Создайте редюсер (reducer), который будет обрабатывать действие добавления книги и обновлять состояние Redux. Например, вы можете создать файл `bookReducer.js` и определить в нем функцию `bookReducer`, которая будет принимать текущее состояние (`state`) и действие (`action`), и возвращать обновленное состояние. Например:
```javascript
// bookReducer.js
const initialState = {
books: []
};
const bookReducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_BOOK":
return {
...state,
books: [...state.books, action.payload]
};
default:
return state;
}
};
export default bookReducer;
```
3. Создайте главный редюсер (root reducer), который будет объединять все редюсеры в вашем приложении. Например, вы можете создать файл `reducers.js` и определить в нем функцию `rootReducer`, которая будет объединять редюсеры. Например:
```javascript
// reducers.js
import { combineReducers } from "redux";
import bookReducer from "./bookReducer";
const rootReducer = combineReducers({
book: bookReducer
});
export default rootReducer;
```
4. Создайте хранилище (store) Redux и примените его к приложению. Например, вы можете создать файл `store.js` и определить в нем функцию `configureStore`, которая будет создавать хранилище и применять его к приложению. Например:
```javascript
// store.js
import { createStore } from "redux";
import rootReducer from "./reducers";
const configureStore = () => {
return createStore(rootReducer);
};
export default configureStore;
```
5. Оберните ваш корневой компонент приложения с провайдером (Provider) из react-redux и передайте ему ваше хранилище. Например, в вашем файле `index.js`:
```javascript
// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import configureStore from "./store";
import App from "./App";
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
```
6. В вашем компоненте, который должен отображать данные из Redux, используйте хук useSelector из react-redux для получения данных из хранилища. Например:
```javascript
import React from "react";
import { useSelector } from "react-redux";
const BookList = () => {
const books = useSelector((state) => state.book.books);
return (
<div>
{books.map((book) => (
<div key={book.id}>{book.title}</div>
))}
</div>
);
};
export default BookList;
```
В этом примере в компоненте BookList мы используем useSelector для получения списка книг из состояния Redux и выводим их на экран.
Убедитесь, что вы правильно импортировали все необходимые зависимости (например, функции connect, useDispatch, useSelector) из библиотеки react-redux при выполнении шагов 6 и 7. Проверьте также, что ключ, который вы используете для отображения данных из state.book.books существует в ваших данных. Если используется асинхронная