Как получить доступ к состоянию хранилища в React Redux?
Я просто делаю простое приложение, чтобы узнать асинхронность с redux. У меня все работает, теперь я просто хочу отобразить фактическое состояние на веб-странице. Теперь, как мне фактически получить доступ к состоянию хранилища в методе render?
вот мой код (все на одной странице, потому что я только учусь):
const initialState = {
fetching: false,
fetched: false,
items: [],
error: null
}
const reducer = (state=initialState, action) => {
switch (action.type) {
case "REQUEST_PENDING": {
return {...state, fetching: true};
}
case "REQUEST_FULFILLED": {
return {
...state,
fetching: false,
fetched: true,
items: action.payload
}
}
case "REQUEST_REJECTED": {
return {...state, fetching: false, error: action.payload}
}
default:
return state;
}
};
const middleware = applyMiddleware(promise(), thunk, logger());
const store = createStore(reducer, middleware);
store.dispatch({
type: "REQUEST",
payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});
store.dispatch({
type: "REQUEST",
payload: fetch('http://localhost:8000/list').then((res)=>res.json())
});
render(
<Provider store={store}>
<div>
{ this.props.items.map((item) => <p> {item.title} </p> )}
</div>
</Provider>,
document.getElementById('app')
);
Итак, в методе рендеринга состояния я хочу перечислить все item.title
из магазина.
спасибо
4 ответов
вы должны создать отдельный компонент, который будет прослушивать изменения состояния и обновлять каждое изменение состояния:
class Items extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
};
store.subscribe(() => {
// When state will be updated(in our case, when items will be fetched),
// we will update local component state and force component to rerender
// with new data.
this.setState({
items: store.getState().items;
});
});
}
render() {
return (
<div>
{this.state.items.map((item) => <p> {item.title} </p> )}
</div>
);
}
};
render(<Items />, document.getElementById('app'));
импорт connect
С react-redux
и использовать его для подключения компонента с состоянием connect(mapStates,mapDispatch)(component)
import React from "react";
import { connect } from "react-redux";
const MyComponent = (props) => {
return (
<di>
<h1>{props.title}</h1>
</div>
);
}
}
наконец, вам нужно сопоставить состояния реквизита, чтобы получить к ним доступ с this.props
const mapStateToProps = state => {
return {
title: state.title
};
};
export default connect(mapStateToProps)(MyComponent);
только состояния, которые вы карта будет доступна через props
проверьте этот ответ:https://stackoverflow.com/a/36214059/4040563
для дальнейшего чтения : https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132
вам нужно использовать Store.getState()
получить текущее состояние вашего магазина.
подробнее о getState()
посмотреть этой короткое видео.
вы хотите сделать больше, чем просто getState
. Вы хотите реагировать на изменения в магазине.
Если вы не используете react-redux, вы можете сделать это:
function rerender() {
const state = store.getState();
render(
<div>
{ state.items.map((item) => <p> {item.title} </p> )}
</div>,
document.getElementById('app')
);
}
// subscribe to store
store.subscribe(rerender);
// do initial render
rerender();
// dispatch more actions and view will update
но лучше использовать react-redux. В этом случае вы используете провайдера, как вы упомянули, но затем используете подключиться для подключения компонента к магазину.