Redux -- Redux 初识 Store、配合 redux 实现状态管理

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
//App.js里面引入
import {store} from './store';
查看代码


posted @   菲菲的超级粉丝  阅读(234)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 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 构建精确任务处理应用
点击右上角即可分享
微信分享提示