Как получить доступ к состоянию хранилища в React Redux?

Я просто создаю простое приложение для изучения async с помощью redux. У меня все работает, теперь я просто хочу отобразить фактическое состояние на веб-странице. Теперь, как мне получить доступ к состоянию хранилища в методе рендеринга?

Вот мой код (все на одной странице, потому что я просто изучаю):

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 из хранилища.

Спасибо

Ответ 1

Вам необходимо создать отдельный компонент, который будет слушать изменения и обновление состояния при каждом изменении состояния:

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'));

Ответ 2

Вам нужно использовать Store.getState(), чтобы получить текущее состояние вашего магазина.

Для получения дополнительной информации о getState() смотрите это короткое видео.

Ответ 3

Вы хотите сделать больше, чем просто getState. Вы хотите реагировать на изменения в магазине.

Если вы не используете response-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

Но лучше использовать реакцию-редукт. В этом случае вы используете Поставщик, как вы упомянули, но затем используйте connect, чтобы подключить ваш компонент к хранилищу.