Redux 初识 Store、配合 redux 实现状态管理
- redux官方文档
- 安装所依赖的模块(公用的):cnpm i redux
- 安装所依赖的模块(在react中使用):cnpm i redux react-redux
- 安装所依赖的模块(提供中间件,本节内容选它):cnpm i redux react-redux redux-thunk
- Store 就是保存数据的地方,可以把它看成一个容器,整个应用只能有一个 Store
1、根组件App.js里,用一个容器把根组件包裹起来
- 先引入:import {Provider} from 'react-redux';
- 使用 Provider 包含所有组件
- React-Redux 提供 Provider 组件,可以让容器组件拿到 state。 所以,这里的 Provider 就拿到了根组件的全部 state
- 创建 store,参考redux官方文档
- createStore 相关参数
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Posts from "./components/Posts";
import PostForm from "./components/PostForm";
import {Provider} from 'react-redux';
import {createStore,applyMiddleware} from 'redux';
//创建store并在上头引入
const store = createStore(() => [],{},applyMiddleware())
function App() {
return (
//使用Provider
<Provider store={store}>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<PostForm/> {/*使用 */}
<Posts/> {/*使用 */}
</div>
</Provider>
);
}
export default App;
2、代码抽离
- 在 src 下新建 store.js文件
- 将App.js 里的某些东西剪切过来
- 引入thunk 到store.js
- 在App.js里避免报错,引入store
import {store} from './store';
查看代码
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用