Вы можете создать редуктор с помощью initalState
const initialState = {
firstname: '',
lastname: '',
email: '',
...
}
после того, как мы хотим создать диспетчерскую функцию, которая получает данные с сервера и отправляет их для хранения.
export const funnyDispatch = () => async dispatch => {
const response = await fetch('http://example.com/api');
dispatch({
type: 'FUNNY_DATA',
payload: response.userData
})
}
, затем объявляет функцию редуктора, котораяописывает, как изменяется состояние.
function FunnyReducer(state=initalState, action){
switch(action.type){
case 'FUNNY_ACTION':
return {
...state,
firstname: action.payload.firstname, //firstname is property from data which is fetched from server (userData)
lastname: action.payload.lastname,
email: action.payload.email
}
default: return state
}
}
и Vualla, мы получили наши данные в хранилище.
проверьте сокращение документов для получения более подробной информации
РЕДАКТИРОВАТЬ
и когда вам нужно получить данные из хранилища, вы можете использовать метод connectact-redux.
вы объявляете переменную mapStateToProps (вы можете выбрать любое имя), которая принимает состояние какаргумент (мы не можем назвать его хранилищем, потому что это не экземпляр хранилища, это значение состояния) и возвращает требуемые свойства из начального состояния (объявленного в вашем редукторе)
const mapStateToProps = state => ({
firstname: state.yourReducerName.firstname,
lastname: state.yourReducerName.lastname
})
// yourReducerName is name you give your reducer when you config your store with createStore or combineReducers
, тогда вы просто экспортируете
export default connect(mapStateToProps, {
yourDispatchFunction: (dispatch) => {} //you can export funnyDispatch in this component and put it here
})(YourComponent);
и вы получаете свойства состояния с помощью
this.props.lastname
, и вы можете отправить функцию в свой обработчик событий (или метод жизненного цикла) следующим образом:
this.props.nameYouGaveToFunnyDispatch()