Доброго времени суток! Разбираюсь с 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
}
Помогите пожалуйста кто знает как это сделать.