最近在学习react,本来有点vue基础,信心满满埋头就学
哎,晕头转向,最开始基础基本全是this什么什么,然后又是bind什么什么
对那些es6玩的6的大佬来说简简单单啦,偏偏我就不是那一类
要是没点提示性的代码,让我学十天我也就会rcc+tab快捷一个小js
最近正好学到react-redux与redux扩充了一下自己的视野,特在这里记录一下
项目不会写的时候还可以过来看看，哈哈
第一步： 可能代码会记错,不要相信我 尤其是英文,我只是在做我自己能理解的笔记,算的上详细
npm install --save redux npm install --save react-redux
这两个安装下来
第二步:
1.在最主要的App.js文件里引入Provider,Provider会把store提供给它所包裹着的内部的所有组件,也就是说它下面所有的组件都可以访问store仓库
import React, { Component } from 'react';
import {Provider} from 'react-redux'; //一、 Provider把store提供给内部的所有组件
import Header from "./common/header/index";
import store from './store/index'
export default class App extends Component {
render() {
return (
<Provider store={store}> //这里store就是下面要创建的store.js文件导出的
<Header></Header> //包裹着最大的Header组件
</Provider>
)
}
}
2.在src目录下创建store文件夹里面暂时添加index.js与reducer.js文件
3.对store下index.js文件进行配置
import {createStore} from 'redux' //引入大佬级别核心API
import reducer from "./reducer" //这个reducer就是下面配置的那个reducer.js导出的
const store = createStore(reducer); //然后把它传进这个核心API里面在赋值给store
export default store //组装成超级的store就导可以出去浪了
//然后被最大的那个组件，也就是最上面第一段代码那里引入了
就像是个周转箱一样它就动动脑，根本不用它做事
4.reducer.js配置,就是上面第三部store引入的那个文件
const defaultState={ //这是个纯js代码文件看视频解说是传个参数，它返回个值就行了
focused: false //这里是定义store中默认值的,可以一上来就能访问
};
//可以看这里state=defaultState(默认值) , action就是从外部(别的组件)传来的数据、下面会介绍怎么传
export default (state=defaultState,action)=>{
//在这里面做判断，返回对store里面数据怎么修改的指令
return state;
} //具体下面看实战，这只是配置
5.配置完了,已经把store共享出去了，可是每个组件该怎么拿到这些参数呢
6.在需要用到store的地方引入这个组件import { connect } from 'react-redux'; 它下面有
一系列方法可以快速获取store里的数据
套路模板，需要用直接复制粘贴
import React, { Component } from 'react'
// 与Provider组件做连接connect
import { connect } from 'react-redux';
export default class Header extends Component {
render() {
return (
<div>
</div>
)
}
} //这里是export括号结束 在外面const 之前在括号里面const报错掰辞了好久才发现
const mapStateToProps = (state) => {
return {
}
}
const mapDispathToProps = (dispatch) => {
return {
} //还有记得看看return时{}大括号对不对，有没有少一半
}
export default connect(mapStateToProps, mapDispathToProps)(Header); //这里Header就是导出的组件,也是第一步Provider所包裹的那个组件
第二步：
代码全部都关联上
1.最开始，在最大的总的组件上用Provider组件包裹，
2.并在Provider中传入store,
3.没有store所以需要我们创建store.js，reducer.js,
4.配置store.js文件,因为它需要引用reducer.js文件,所以在配置reducer.js文件,
5.哪个组件需要使用就引入connect这个方法,它有两个形参,并且它需要把使用store的这个组件作为值传进去
最后只差内容了,一个小demo怎么修改内容,怎么获取内容了,希望我能记得react-redux的样子
//APP.js
import React, { Component } from 'react';
//一、 Provider把store提供给内部的所有组件
import {Provider} from 'react-redux';
import Demo from './common/foter/Demo' //组件记得引入
import store from './store/index'
export default class App extends Component {
render() {
return (
<Provider store={store}>
<Demo></Demo>
</Provider>
)
}
}
比如现在有Demo组件需要用到store中的值todo,并对它进行数据的更改
//demo组件
import React, { Component } from 'react'
// 与Provider组件做连接connect
import { connect } from 'react-redux';
class Demo extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<input
type="text"
value={this.props.todo} //input的value等于公共组件映射出来的todo
onFocus={this.props.handleFocus} //获取焦点执行这个方法
onBlur={this.props.handleBlur} //失去焦点执行这个方法
/>
</div>
)
}
}
const mapStateToProps = (state) => {
return { // 形参state里面包含了store里的数据
todo: state.todo, //把store里的todo赋值给todo,使得组件用this.props.todo可以访问数据
} //结合上下文来看，放在这两个形参里的方法与值
} //在组件里都可以用this.props来获取与使用
const mapDispathToProps = (dispatch) => {
return {
handleFocus() { //这个方法,在组件中就可以用this.props.handleFocus来使用
const action = { //在这里面可以使用dispatch这个方法,它 可以把新的action(值)
type: "todo_item", //返回给store,store拿着这些参数去reducer做对比做判断
};
dispatch(action);
},
handleBlur() {
const action = {
type: "todo_list" //type像是一道令牌，前面怎么定义，传到后面对比,只要type值(令牌)符合就会执行对应的更改或者操作
};
dispatch(action); //dispatch(action)把新的值发送给大仓库
}
}
}
export default connect(mapStateToProps, mapDispathToProps)(Demo); //前面形参方法都是固定写法(Demo)则代表这个组件
//store下的index.js文件
import {createStore} from 'redux'
import reducer from "./reducer"
const store = createStore(reducer);
export default store;
//没什么好记得，都一样的
这里做交互，做判断，前方返回的type令牌就在这里做判断，如果相等，就执行制定的数据
并返回给start做数据修改两种return的写法都一样，只不过第二种类似之前还没有学redux时修改数据那样,方便记忆
const defaultState={
focused: false,
todo:"公共数据"
};
export default (state=defaultState,action)=>{
if(action.type==="search_focus"){ //如果action的type全等于"searCh_focus"(前面页面传过来的判断令牌)
return {
focused:true //就将这个值返回给stort，里面封装的什么什么就会更新focused的值为true【这个新值】
} //以下都一样
}
if(action.type==="search_blur"){
const newState={
focused:false
}
return newState;
}
if(action.type==="todo_list"){
const newState={
todo:'todo_list已更改'
}
return newState
}
if(action.type==="todo_item"){
return {
todo:"todo_item已更改"
}
}
return state;
}
虽然很肤浅，很多都不会说，只知道有那效果，但总比不知道那效果又有进步一点吧，写到这里，我已经把start与store弄混淆了
