0

Доброго времени суток! Разбираюсь с react-redux и использую для запросов компонет react-thunk. Не могу не как установить начальное состояние в reducer с сервера (API). Предоставлю свой код, для лучшего понимания о чем идут речь.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import axios from 'axios';
import reducers from './reducers/';

import registerServiceWorker from './registerServiceWorker';
import App from './App';

var store = createStore(reducers, applyMiddleware(thunk));

store.dispatch((dispatch) => {
    axios('http://localhost:3001/api/collections')
    .then(colections => dispatch({type: 'SET_STATE_COLLECTION', data: colections.data}))
});

store.dispatch((dispatch) => {
    axios('http://localhost:3001/api/books')
    .then(books => dispatch({type: 'SET_STATE_BOOKS', data: books.data}))
});

export default store

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();

App.js

Сначала в App.js { console.log(this.props) } = {{data: {books: [], collections: []}}, данные store пустые. Потом выстреливают action.type = 'SET_STATE_COLLECTION' для колекции и action.type = 'SET_STATE_BOOKS' для книг заполняя store. Мне же нужно чтобы данные изначально были в состоянии store, а они пустые и приходят по выстрелам option. Не могу понять как это сделать, как поставить изначальное состояние.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class App extends Component {
  render() {
    return <div>
      { console.log(this.props) }
    </div>
  }
}

export default connect((state) => ({data: state}), (dispatch) => ({}))(App)

Файлы ./reducers/

index.js

import { combineReducers } from 'redux';
import collections from './collections';
import books from './books';

export default combineReducers({
    books,
    collections
})

collection.js

Здесь состояние можно установить объявив переменную collection = [...] и записав в нее данные, после же записать в функцию как параметр collectionsReducer(state = collection ), но мне нужно получить их с сервера изначально, а не объявлять.

export default function collectionsReducer(state, action) { // reducer
        console.log(action);
        if (state === undefined) {
            return state = []
        }
        if (action.type === 'SET_STATE_COLLECTION') {
            return [...state, action.data]
        }
        return state;
    }

books.js

export default function booksReducer(state, action) {
        // console.log(action);
        if (state === undefined) {
            return state = []
        };
        if (action.type === 'SET_STATE_BOOKS') {
            return [...state, action.data]
        }
        return state
    }

Помогите пожалуйста кто знает как это сделать.

2 ответа 2

1

Во первых, лучше бы перенести запросы api в компонент App, и подключить его к store

class App extends React.Component {
    componentWillMount() {
        this.props.loadBooks();
        this.props.loadCollections();
    }
    ...
}

Здесь this.props.loadBooks, this.props.loadCollections - это экшены, которые загружают данные. componentWillMount вызовется один раз при инициализации компонента, можно добавить флаг, который говорит о процессе загрузки

book.reducer

const initialState = {
    items: [],
    isLoading: true,
}

В самом редьюсере уже заполнять данные

export default function booksReducer(state = initialState, action) {
    switch(action.type) {
        case 'SET_STATE_BOOKS': {
            return {
                ...state,
                items: action.payload,
                isLoading: false,
            }
        }
        default: return state;
    }
}

На счет изначального заполнения данных в сторе, зачем это? Вы можете в App проверять, есть ли данные или нет и отображать loader или еще что-то

Но если уж совсем извращения ( не уверен, что это рабоает, нужно проверить )

store.dispatch((dispatch) => {
    Promise.all([
        axios('http://localhost:3001/api/books'),
        axios('http://localhost:3001/api/collections')
    ]).then((books, collections) => {
       dispatch({type: 'SET_STATE_BOOKS', data: books});
       dispatch({type: 'SET_STATE_COLLECTION', data: colections});
       // если не будет работать, то возвращайте Promise.resolve
       // return Promise.resolve();
    }).then(() => {
        ReactDOM.render(
            <Provider store={store}>
               <App />
            </Provider>,
            document.getElementById('root')
        );
    })
});
6
  • Заполнять изначально данные в сторе для того, чтобы в render() вывести коллекцию или книги на страницу, но так не выходит т.к. данные пустые. А вы имеете ввиду проверять в render-е по loader-у, на содержание данных?
    – Nick
    16 янв 2018 в 17:29
  • а если нужен ssr? то такая схема не прокатит...
    – xFloooo
    16 янв 2018 в 17:48
  • @xFloooo Да не катит, рендер выводит при первом проходе ошибку, т.к. данных нет.
    – Nick
    16 янв 2018 в 18:04
  • @Nick а ssr вам нужен?
    – xFloooo
    16 янв 2018 в 20:12
  • xFloooo Это что то связанное с сервером? Скорее всего нет.
    – Nick
    16 янв 2018 в 20:56
0

попробуйте books = {}, потому что, если books = undefined, будет ошибка

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.