转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
如何在组件外部访问 Redux 存储的对象？
编号：[react_21]
1 创建 store
1️⃣首先，在项目中安装 Redux：
🔗Redux
2️⃣接着，在 src 目录下创建一个“文件夹” store ，并在 store 文件夹下创建一个“文件” index.js ——即，存放 store 代码的位置：
3️⃣有了存放 store 代码的位置 index.js ，我们就可以在里边用代码来创建一个数据的“公共存储仓库”：
import { createStore } from "redux"; /*
3️⃣-①：从 redux 这个第三方模块中，
引入 createStore 方法；
*/
const store = createStore(); // 3️⃣-②：调用这个方法创建一个 store；
export default store; // 3️⃣-③：将创建的 store 导出。
2 创建 reducer
4️⃣❗️❗️❗️由于 store 仅仅是一个“图书管理员”，它记不住到底应该怎么去管理数据。故，它需要一个“记录本”reducer 来辅助它去管理数据。因此，我们在创建 store 的同时，必须要把这个“记录本”一并传给 store，否则 store 什么也不知道。
4️⃣-①：所以，我们还得去创建 reducer.js 文件；
4️⃣-②：在 Redux 中， reducer.js 文件需要返回一个“函数”；
const defaultState = { /*
4️⃣-④：既然 reducer 的一个重要功能是“放置数据”，
那么根据之前做 TodoList 的经验，
TodoList 里边需要两项“默认数据”：inputValue 和 list；
*/
inputValue: "Hello, Oli.", // 💡为了便于讲解，我们先给这两项数据分别都设置一个初始值。
list: [1,2,3]
};
// 4️⃣-⑤：上边有了“默认数据”，这里记得让“参数”state 等于 defaultState；
export default (state = defaultState, action) => { /*
4️⃣-③：返回的“函数”接受两个固定参数：
state 和 action。
state 指：整个仓库里存储的数据（可以形象地理解为，“记录本”
里记录的“图书馆”中所有的书籍信息）；
action 指：❗️这个下篇文章讲解，这里先掌握 state。
*/
return state; // 🚀默认返回 state。
}
4️⃣-⑥：同时，在前边创建 store 的时候（ index.js ），我们要把“记录本”reducer 传递给 store，并将 reducer 作为第一个“参数”传递给“方法” createStore() ；
import { createStore } from "redux";
import reducer from "./reducer"; // 🚀从当前目录下的 reducer.js 引入 reducer。
const store = createStore(reducer); // ❗️❗️❗️将 reducer 作为第一个“参数”传递给“方法”createStore！
export default store;
4️⃣-⑦：既然把“记录本”reducer 传递给了 store，那么 store 就知道这个仓库里边有 inputValue 和 list 这两个数据了；
3 取得并显示数据
5️⃣通过以上的步骤，store 里边就有数据。一旦有了数据，各“组件”就可以连接 store，去 store 里边取数据并显示出来。
5️⃣-①：打开 TodoList.js 文件，将里边之前“写死”的数据删除掉；
// const data = [
// 'Racing car sprays burning fuel into crowd.',
// 'Japanese princess to wed commoner.',
// 'Australian walks 100km after outback crash.',
// 'Man charged over missing wedding girl.',
// 'Los Angeles battles huge wildfires.',
// ];
5️⃣-②：在 TodoList.js 里引入 store，以便在里边取数据；
import store from "./store"; // 🚀从当前文件夹下的 store 目录里的 index.js 中引入 store。
继续在 TodoList.js 中编写代码：
import React, {Component} from "react";
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from "./store"; /*🚀引入 store。*/
class TodoList extends Component {
constructor(props) {
super(props);
this.state = store.getState(); /*
5️⃣-③：在 TodoList.js 里，
可以利用 store 提供给我们的 getState 方法
来获取到 store 中的数据；
❗️即，组件中 state 数据的来源为 store 中的数据！
*/
}
render() {
return (
<div style={{marginTop: "10px", marginLeft: "10px"}}>
<div>
{/* 5️⃣-④：将获取到的数据 inputValue 展示在页面上； */}
<Input value={this.state.inputValue} placeholder="todo info" style={{width: "300px", marginRight: "10px"}} />
<Button type="primary">提交</Button>
{/* 5️⃣-⑤：将获取到的数据 list 展示在页面上； */}
<List style={{marginTop: "10px", width: "300px"}}
bordered
dataSource={this.state.list}
renderItem={item => <List.Item>{item}</List.Item>}
/>
</div>
</div>
)
}
}
export default TodoList;
看下最后的效果：
下一篇，我们会详细讲解本篇的遗留问题 action。利用它，我们就可以做出“在页面 input 输入框输入内容，点击“提交”后，内容就会显示在“列表项”里”的效果。
祝好，qdywxs ♥ you！
