react仓库

最新推荐文章于 2024-04-03 08:43:07 发布
最新推荐文章于 2024-04-03 08:43:07 发布
阅读量473 收藏
点赞数 1
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QZ9420/article/details/112292454
版权

定义一个仓库并且使用：

		const createStore = (state, changeState)=>{
			return {   // 返回的对象就可以称为一个仓库
			
            }
        }
                 // 使用之
         let store = createStore(); // 创建一个仓库

获取并且初始化状态：

		const createStore = (state, changeState)=>{
			const getState = () => state
			return {   // 返回的对象就可以称为一个仓库
                dispatch,  // 派发一个动作
                getState,   // 获取状态
                subscribe  // 订阅			
            }
        }
                // 初始化状态  老的状态
        let countState = { count:0 }
                 // 使用之
         let store = createStore(countState ); // 创建一个仓库

更新状态：

		const createStore = (state, changeState)=>{
			const getState = () => state
			return {   // 返回的对象就可以称为一个仓库
                dispatch,  // 派发一个动作
                getState,   // 获取状态
                subscribe  // 订阅			
            }
        }
                // 初始化状态  老的状态
        let countState = { count:0 }
         // 更新状态  所谓改变状态，并不想修改老状态，目标是返回一个新状态
        function changeState(state, action){

        }
                 // 使用之
         let store = createStore(countState ,changeState); // 创建一个仓库

订阅render：

		const createStore = (state, changeState)=>{
			const getState = () => state
            // 订阅
            let listeners = [];
            const subscribe = (listener) => listeners.push(listener)
			return {   // 返回的对象就可以称为一个仓库
                dispatch,  // 派发一个动作
                getState,   // 获取状态
                subscribe  // 订阅			
            }
        }
                // 初始化状态  老的状态
        let countState = { count:0 }
         // 更新状态  所谓改变状态，并不想修改老状态，目标是返回一个新状态
        function changeState(state, action){
        
        }
                // 初始渲染和更新渲染
        function render(){
            document.getElementById("count").innerHTML = store.getState().count
        }
                 // 使用之
         let store = createStore(countState ,changeState); // 创建一个仓库
		        // 先订阅
        store.subscribe(render)

派发一个动作：

		const createStore = (state, changeState)=>{
			const getState = () => state
            // 订阅
            let listeners = [];
            const subscribe = (listener) => listeners.push(listener)
            // 发布
            const dispatch = (action) =>{
                state = changeState(state, action)
                listeners.forEach(listener=>listener())
            }
			return {   // 返回的对象就可以称为一个仓库
                dispatch,  // 派发一个动作
                getState,   // 获取状态
                subscribe  // 订阅			
            }
        }
                // 初始化状态  老的状态
        let countState = { count:0 }
         // 更新状态  所谓改变状态，并不想修改老状态，目标是返回一个新状态
        function changeState(state, action){
            switch(action.type){
                case "INCREMENT":
                    // state.count += action.num  // 修改的还是老状态
                    return{
                        count:state.count + action.num
                    }
                case "DECREMENT":
                    // state.count -= action.num
                    return{
                        count:state.count - action.num
                    }
                default:state;  // 返回老状态
            }
        }
                // 初始渲染和更新渲染
        function render(){
            document.getElementById("count").innerHTML = store.getState().count
        }
                 // 使用之
         let store = createStore(countState ,changeState); // 创建一个仓库
		        // 先订阅
        store.subscribe(render)

完整版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 当点击加1时，需要派发一个动作，使用一个对象来描述这个动作 -->
    <!-- 这个对应中有一个属性叫type  {type:"INCREMENT",num:1} -->
    <!-- 封装一个方法用来派发这个动作 动作叫action -->
    <button onclick='store.dispatch({type:"INCREMENT",num:1})'>加1</button>
    <h1 id="count"></h1>
    <button onclick='store.dispatch({type:"DECREMENT",num:1})'>减1</button>
    <script>
        // createStore需要传入一个初始化状态state
        // 第2个参数是方法，用来改变状态   Store是仓库的意思
        const createStore = (state, changeState)=>{
            const getState = () => state

            // 订阅
            let listeners = [];
            const subscribe = (listener) => listeners.push(listener)

            // 发布
            const dispatch = (action) =>{
                state = changeState(state, action)
                listeners.forEach(listener=>listener())
            }

            return {   // 返回的对象就可以称为一个仓库
                dispatch,  // 派发一个动作
                getState,   // 获取状态
                subscribe  // 订阅
            }
        }
        
        // 初始化状态  老的状态
        let countState = { count:0 }
        // 更新状态  所谓改变状态，并不想修改老状态，目标是返回一个新状态
        function changeState(state, action){
            switch(action.type){
                case "INCREMENT":
                    // state.count += action.num  // 修改的还是老状态
                    return{
                        count:state.count + action.num
                    }
                case "DECREMENT":
                    // state.count -= action.num
                    return{
                        count:state.count - action.num
                    }
                default:state;  // 返回老状态
            }
        }
         // 使用之
         let store = createStore(countState,changeState); // 创建一个仓库
         
        // 初始渲染和更新渲染
        function render(){
            document.getElementById("count").innerHTML = store.getState().count
        }
        // 刚上来，就需要把初始化状态渲染到页面
        render();

       
        // 先订阅
        store.subscribe(render)

    </script>
</body>
</html>
予倾
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 三大仓库（Dva 、mobx 、Redux）
ZhaoYulin6的博客
02-20 1964
Dva:数据状态管理库 mobx：响应式管理 Redux:函数式管理 1.Dva详解 1.使用dva脚手架（dva-cli）快速构建React项目 npm install -g dva-cli 2.定义model 先设计 model 设计 component 连接两者（model 和 component） 2.1 dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。 .
React:React仓库
03-13
React:React仓库
React使用redux仓库
q1054007919的博客
01-19 592
具体的注解: 三个核心概念： store:数据仓库，存放项目公共数据的地方，一般一个项目只有一个store action:通知对象，他是一个普通的json对象，里面必须要有type属性，表示通知类型，其他属性可以任意定制，一般都是后续计算的时候所需要的参数 reducer:计算者，规定了数据的修改规则，他就是一个函数，接收两个参数 参数一：state 表示了store中的数据 参数二：action通知对象 函数体：根据action中的type字段来返回不同的数据，返回的数据会覆盖s
让你熟悉React 的 7 个 Github 仓库
最新发布
frontend_frank的博客
04-03 86
总结如果你想掌握 React，这 7 个 Github 仓库是宝贵的学习资源，有大量示例代码和设计模式可供学习。让我们开始吧 ????krasimir/react-in-pattern[1]这个仓库包含演示常见 React 设计模式的代码示例。它涵盖了状态管理、异步数据获取、认证等方面的模式。学习这些模式将让你对如何构建可扩展的 React 应用有更深刻的理解。jeromedalbert/real-wo...
【React】状态管理仓库 原生\封装\第三方
qq_61834461的博客
07-09 622
状态管理仓库 原生\封装\第三方
react Redux 用Redux中央仓库实现一个todolist
小羽向前跑
09-19 423
Redux简单介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript） ReduxDevTools插件Redux调试工具...
deliveryPro:节点和React仓库管理系统
08-03
DeliveryPro 项目未维护，如果您在 PC 上本地克隆它，则该项目将不会运行
react-base:React骨架
05-11
基于React的应用程序的框架 启动基于React...react-base”的新项目git clone git@github.com:fs/react-base.git --origin react-base [MY-NEW-PROJECT] 在GitHub上创建您的新仓库，并将master推送到其中。 确保master分
React Flexbox实施-React开发
05-27
React-flexbox以内联样式来实现CSS flexbox。 它是用ES6编写的，需要从ES6到ES5的编译器。 如果有需要，我可以将翻译版本添加到仓库中。 React-flexbox中的API以内联样式进行React时，css flexbox的实现。 它是用ES6...
ReactNative简单仓库realm数据库组件实现
10-10
React Native简单仓库app的实现，用到了realm组件实现数据库的存储；还有到react-native-drawer抽屉组件实现删除功能。由于上传资源限制大小，未能上传整个项目代码，只上传了关键代码，望见谅。
React中使用 react-toolkit和react-redux 创建redux仓库（一）
weixin_46022934的博客
04-03 608
系列文章目录 前言 一、第一步：安装reduxjs/toolkit和react-redux 1. 创建一个react项目 2.执行下面的npm命令 npm命令代码如下： 检查依赖安装是否success 二、第二步：创建仓库 1.创建仓库的具体流程如下 2.创建文件结构（可根据自己认识创建文件） 3.创建一个Promise模拟network（mockUserInfoFetchData.js） 代码如下(这里就不做code解释了) 4.createSlice创建reducer并导出Action和reducer（
仓库管理系统：带有react.js的仓库管理系统
02-03
仓库管理系统 使用MongoDB，Express，Node.js和ReactJS构建的仓库管理系统。 入门 这些说明将为您提供项目副本，并在您的本地计算机上运行以进行开发。 先决条件 后端： MongoDB 表达 Node.js " dependencies " : { " bcryptjs " : " ^2.4.3 " , " cors " : " ^2.8.5 " , " cross-env " : " ^5.2.0 " , " date-fns " : " ^2.0.1 " , " dotenv " : " ^7.0.0 " , " express " : " ^4.16.4 " , " faker " : " ^4.1.0 " , " gravatar " : " ^1.8.0 " , " jsonwebtoken " : " ^8.5.1 " , " lodash " : " ^4.17.15 " , " mongoose " : " ^5.5.0 " , " mui-da
react 学习笔记 reduex仓库
weixin_45561719的博客
02-04 375
安装redux和reace-redux index.js import { createStore } from 'redux' import { Provider } from 'react-redux' import reducer from './reducers/counter' //创建仓库 const store = createStore(reducer); ReactDOM.render( <Provider store={store}><APP /></Pr
redux
baijianwei0408的博客
05-24 204
三大原则 单一数据源 整个应用的state都存储在一个状态树中 State是只读的 只能通过action来改变state 使用纯函数来执行修改 只能通过action来同志reducer来改变state Action action通过store.dispatch把通知发送到reducer中，reducer根据发送来的type进行分别处理。 下面就是一个action。 { type: "ADD_...
redux+react-cli创建数据仓库
zhoulib__的博客
01-10 196
介绍 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 安装 npm i redux -S npm i redux-react -S 要引用的模块及作用 import { combineReducers，createStore } from 'redux' import {connect,Provider} from 'react-redux' 代码片段及解释 cre...
【React+ts 】用redux仓库存储字段
weixin_58867312的博客
07-18 98
redux存取值
GitHub 上需要关注的 10 大 React 库
前端大全
03-24 426
（点击上方公众号，可快速关注）英文：  Anton Shaleynikov   译文出：码农网/小峰www.codeceo.com/10-top-react-libs-on-github.html由Facebook创建的React已经成为一个非常强大的JavaScript框架，它能使程序员的前端开发工作更容易。如果你已工作于React.js一段时间了，那么你会赞同若干其他的库可以和React一起使
react中redux的初理解【React Components组件—Store数据仓库—Reducers数据处理-Action Creators的关系】
weixin_42618492的博客
08-28 587
1.store的创建—store仓库的数据获取 在src文件下创建store文件夹，然后新建index.js，然后引入第三方模块redux，然后运用createStore()方法创建一个store，这样我们就创建了一个公共的数据仓库。我们把新建的reducer引入进来，这时候store数据仓库中的数据也就被引入进来了。 同时在src下创建reducer.js，reducer负责管里整个项目应用中的数据格式及数据处理。这里的reducer会返回一个函数，函数中会接收两个值：state和action，其.
1.React学习笔记----基础模板创建+远程仓库建立
kikock的博客
02-25 362
React学习笔记 1. 下载基础模板项目(nodejs安装,create-react-app模块安装,git安装略) 在当前文件夹创建一个react模板项目 react-admin create-react-app react-admin ps: 运行时出现下图错误 解决: 跟目录下添加.env 配置文件忽略版本差异 2. 运行打包项目 首先安装serve模块(使用频繁 添加到全局模块中)...
react仓库异步操作
05-25
React 仓库中的异步操作通常是通过 React Hooks 中的 `useState` 和 `useEffect` 来处理的。 `useState` 用于保存组件的状态数据，而 `useEffect` 则用于处理副作用，比如异步数据加载、订阅等操作。当组件状态发生...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值