Javascript 如何访问React Redux中的存储状态？

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

这是我的代码（所有内容都在一页中，因为我只是在学习）：

const initialState={
取景：假，
抓取：假，
项目：[]，
错误：null
}
const reducer=（state=initialState，action）=>{
开关（动作类型）{
案例“请求未决”：{
返回{…状态，获取：true}；
}
案例“请求已满足”：{
返回{
……国家，
取景：假，
真的，
项目：行动.有效载荷
}
}
案例“请求被拒绝”：{
返回{…状态，获取：false，错误：action.payload}
}
违约：
返回状态；
}
};
const middleware=applyMiddleware（promise（），thunk，logger（））；
const store=createStore（减速机、中间件）；
仓库调度({
键入：“请求”，
有效负载：获取（'http://localhost:8000/list）。然后（（res）=>res.json（）
});
仓库调度({
键入：“请求”，
有效负载：获取（'http://localhost:8000/list）。然后（（res）=>res.json（）
});
渲染(
{this.props.items.map（（item）=>{item.title}
）}
,
document.getElementById（'app'）
);

因此，在状态的render方法中，我想列出存储区中的所有

项.title

谢谢

您需要使用以获取店铺的当前状态

---

有关

getState（）

观看短视频的更多信息。

您应该创建单独的组件，该组件将侦听状态更改并在每次状态更改时更新：

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

---

从“../reducers/store”导入存储；
类项扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
};
store.subscribe（（）=>{
//何时更新状态（在我们的例子中，何时取回项目），
//我们将更新本地组件状态并强制组件重新加载
//有了新的数据。
这是我的国家({
项：store.getState（）.items；
});
});
}
render（）{
返回(
{this.state.items.map（（item）=>{item.title}
）}
);
}
};
render（，document.getElementById（'app'））；

您想要做的不仅仅是

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

函数重新渲染器（）{
const state=store.getState（）；
渲染(
{state.items.map（（item）=>{item.title}
）}
,
document.getElementById（'app'）
);
}
//订阅商店
存储。订阅（重新提交）；
//进行初始渲染
重新加载（）；
//调度更多操作，视图将更新

---

但更好的方法是使用react-redux。在这种情况下，您可以使用前面提到的提供程序，但随后使用将组件连接到存储。

从

react redux

导入

connect

，并使用它将组件连接到状态

connect（MapState，mapDispatch）（component）

只有您映射的州才能通过

props

看看这个答案：

---

进一步阅读：

如果你想进行一些高性能的调试，你可以订阅状态的每一次更改，并暂停应用程序，以查看详细情况，如下所示

store.js 将其放在执行

createStore

操作的文件中

要将

状态

对象从控制台复制到剪贴板，请执行以下步骤：

在Chrome控制台中右键单击一个对象，然后从上下文菜单中选择“存储为全局变量”。它将返回类似temp1的变量名

Chrome还有一个

copy（）

方法，因此控制台中的

copy（temp1）

应该将该对象复制到剪贴板

您可以在json查看器中查看对象，如下所示：

---

您可以在这里比较两个json对象：

所有答案都来自前钩子时代。您应该使用useSelector钩子从redux获取状态

在redux reducer文件中或可以轻松导入的地方：

import { useSelector } from 'react-redux'

export function useEmployees() {
  return useSelector((state) => state.employees)
}

在应用程序代码中：

const { employees } = useEmployees()

---

关于redux钩子的更多信息：为了实现这一目标。

您就快到了。您需要使用

react-redux

库创建一个存储连接组件。我强烈建议您通过作者提供的免费课程来完善您对redux的理解：您可以使用

store.getState（）

来实际读取存储中的状态。谢谢你的指导。我不完全理解redux，本教程将对我有很大帮助。所以我只是将

this.props.items

更改为

store.getState（）.items

？当我这样做时，它没有输出

项。title

@parkissim看起来您没有为组件进行初始渲染。我强烈建议您观看此课程：@parkism this不显示项目，因为当应用程序第一次呈现时，尚未收到服务器的响应，您需要订阅存储，以便在每次存储更改时更新组件。我有

let store=createStore（todoApp）

在

index.js

中，我想访问

store

在

App.js

中的

store

-它是什么方式？TypeError:undefined不是一个对象（评估'\u redux.store.getState'）@1ven我们如何得到这里定义的

store

变量？@BangDao我们可以假设，我们是从外部文件导入的<代码>存储变量-它是redux存储实例。@为了清楚起见，您应该包括

存储

导入。ReferenceError找不到变量：存储

从导入存储“/
const mapStateToProps = state => {
  return {
    title: state.title
  };
};
export default connect(mapStateToProps)(MyComponent);

store.subscribe( () => {
  console.log('state\n', store.getState());
  debugger;
});

import { useSelector } from 'react-redux'

export function useEmployees() {
  return useSelector((state) => state.employees)
}

const { employees } = useEmployees()