如何在 React Redux 中访问存储状态? [英] How do I access store state in React Redux?

问题描述

我只是在制作一个简单的应用程序来学习与 redux 的异步.我已经让一切正常，现在我只想在网页上显示实际状态.现在，我如何在渲染方法中实际访问商店的状态?

这是我的代码(所有内容都在一页中，因为我只是在学习):

const initialState = {取:假，获取:假，项目: []，错误:空}const reducer = (state=initialState, action) =>{开关(动作.类型){案例REQUEST_PENDING":{返回{...状态，获取:真}；}案例REQUEST_FULFILLED":{返回 {...状态，取:假，获取:真实，项目:action.payload}}案例REQUEST_REJECTED":{返回 {...状态，获取:false，错误:action.payload}}默认:返回状态；}};const 中间件 = applyMiddleware(promise(), thunk, logger());const store = createStore(reducer, middleware);store.dispatch({类型:请求"，有效载荷: fetch('http://localhost:8000/list').then((res)=>res.json())});store.dispatch({类型:请求"，有效载荷: fetch('http://localhost:8000/list').then((res)=>res.json())});使成为(<提供者商店={商店}><div>{ this.props.items.map((item) => <p> {item.title} </p> )}

</提供者>,document.getElementById('app'));

所以，在 state 的 render 方法中，我想列出 store 中所有的 item.title.

谢谢

解决方案

您应该创建单独的组件，该组件将监听状态更改并在每次状态更改时进行更新:

从'../reducers/store'导入商店；类项目扩展组件{构造函数(道具){超级(道具)；this.state = {项目: []，};store.subscribe(() => {//当状态更新时(在我们的例子中，当项目将被获取时)，//我们将更新本地组件状态并强制组件重新渲染//使用新数据.this.setState({项目:store.getState().items;});});}使成为() {返回 (<div>{this.state.items.map((item) => <p> {item.title} </p>)}

);}};render(, document.getElementById('app'));

I am just making a simple app to learn async with redux. I have gotten everything working, now I just want to display the actual state onto the web-page. Now, how do I actually access the store's state in the render method?

Here is my code (everything is in one page because I'm just learning):

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

So, in the render method of the state I want to list out all the item.title from the store.

Thanks

解决方案

You should create separate component, which will be listening to state changes and updating on every state change:

import store from '../reducers/store';

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

这篇关于如何在 React Redux 中访问存储状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！