react-redux的初级使用（react初学者笔记）

一.create-react-app脚手架的搭建和运行

npm install -g create-react-app

create-react-app <项目名称>

cd <项目名称>

npm start

二.redux的简单使用

引入包

npm install redux --save

步骤：
1.写reducer方法(state,action)
2.创建store（通过createStore）
3.写方法（调用dispatch(action)）
4.写显示界面
5.监听变化，重新渲染(store.subscribe)

为方便展示，这里直接改index.js文件
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {createStore} from 'redux';
// import * as serviceWorker from './serviceWorker';
//用于操作状态的仓库，通过动作操作state
const reducer = function(state={num:10},action){switch (action.type) {case "add":state.num+=1;break;case "decr":state.num-=1;break;default:console.log("找不到对应的action.type")}return {...state}; //相当于复制得到一个新的state
}//创建store对象，关联对应仓库
const store = createStore(reducer)//调用dispatch执行,传入对应的action.type，指明执行的方法
function add(){//通过仓库的方法dispath进行修改数据store.dispatch({type:'add'})console.log(store.getState())
}
//调用dispatch执行,传入对应的action.type，指明执行的方法
function decr(){//通过仓库的方法dispath进行修改数据store.dispatch({type:'decr'})console.log(store.getState())
}//显示界面
const Counter = function(props){let state = store.getState()return (<div className="index"><h1 >值：{state.num}</h1><button onClick={add}>加一</button>&nbsp;&nbsp;&nbsp;<button onClick={decr}>减一</button></div>)
}//监听变化，重新渲染
store.subscribe(()=>{ReactDOM.render(<Counter />,document.getElementById('root'));
})ReactDOM.render(<Counter />,document.getElementById('root')
);// serviceWorker.unregister();

三.react-redux的简单使用

引入包

npm install --save react-redux

步骤：
1.写reducer
2.初始化store
3.写映射state数据，映射dispatch方法
4. 写你的组件，调用映射的方法
5. 使用connect关联3映射方法和4你的组件
6. 使用 Provider 包裹5组件，渲染
为方便展示，这里直接改index.js文件
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux'
/*** 步骤：1. 写reducer*      2. 初始化store*      3. 写映射state数据，映射dispatch方法。*      4. 写你的组件，调用映射的方法*      5. 使用connect关联3映射方法和4你的组件*      6. 使用 Provider 包裹5组件，渲染 */class Counter extends React.Component{render(){const value = this.props.value;const onAddClick = this.props.onAddClick;return(<div><h1>计数的数量：{value}</h1><button onClick = {onAddClick}>加一</button></div>)}
}function reducer(state={num:0},action){switch (action.type) {case "add":state.num+=1;break;default:console.log("找不到对应的action.type")}return {...state};
}const store = createStore(reducer);//将state映射对应的props函数
function mapStateToProps(state){return {value : state.num}
}//动作
const addAction = {type:'add'
}
//将修改state数据方法dispatch映射到props，实现方法贡献
function mapDispatchToProps(dispatch){return {onAddClick:()=>{dispatch(addAction)}}
}//组件和数据进行连接
const App = connect(mapStateToProps,mapDispatchToProps
)(Counter)// /**自动将store里的state和组件进行关联 */
ReactDOM.render(<Provider store = {store}><App /></Provider>,document.getElementById('root')
);

附上这两个文件的github地址：github地址

react-redux的初级使用（react初学者笔记）相关推荐

react redux学习之路
React 自学 chapter one React新的前端思维方式 React的首要思想是通过组件(Component)来开发应用.所谓组件,简单说,指的是能够完成某个特定功能的独立的.可重用的代码 ...
React+Redux仿Web追书神器
引言由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
react dispatch_梳理下redux、mobx 在react的应用
❝ 本文整理下近期 redux.mobx 在 react 中的使用对比,大家可以根据个人喜好,合理使用查看完整 demo ❞ redux 状态管理 redux 基本使用流程 ❝ 首先把 redux ...
react+redux实战——redux到底是个啥子？
写在前面文章是个人初学redux的分享,从redux基础知识点到使用redux搭建简单的表单提交项目. 项目代码地址:https://github.com/jishuaizhen/react-red ...
React深入学习与源码解析笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
React Redux入门
目录入门我们应该什么时候使用? Redux库和工具 Redux Toolkit Redux DevTools 扩展 demo练习准备工作: 基础示例 Redux Toolkit示例 Redux术语 ...
React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
React+Redux打造“NEWS EARLY”单页应用一步步让你理解最前沿技术栈的真谛
之前写过一篇文章,分享了我利用闲暇时间,使用React+Redux技术栈重构的百度某产品个人中心页面.您可以参考这里,或者参考Github代码仓库地址. 这个工程实例中,我采用了厂内的工程构建工具-F ...
React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...

react-redux的初级使用（react初学者笔记）

一.create-react-app脚手架的搭建和运行

二.redux的简单使用

三.react-redux的简单使用

react-redux的初级使用（react初学者笔记）相关推荐

最新文章

热门文章