1.redux的意义
redux-----我觉得就是一个 小型数据库
这个数据库保存的数据可以在全组件调用
产生原因:
因为组件传值不是很方便
大家走知道 组件存在传值的操作
如果父子传值还好
就怕多层传值 以及兄弟传值
数据来回的传递
为了解决这个多组件 跨组件的传值问题 出现了redux
把redux 独立出来一个仓库store 这个数据所有组件都可用都可改变
这样多层的父子传值就解决了
2.redux下载
npm i redux
3.在react项目中使用
npm i create-react-app
create-react-app appName
4.加载redux的store
store.js
import {createStore} from "redux"
const store1=createStore(/*这里需要一个处理函数 函数有数据和数据操作*/)
export default store1
5.加载redux的store所需的数据和数据操作
//2.函数参数的数据
const initstate={
count:0
}
//1.抛出函数
const reduxdatafn=(state=initstate,action)=>{
//3.根据action 组件会触发dispath 执行不同操作
switch (action.type) {
case "addCount":
return {
...state,
count: state.count + 1
}
case "reduceCount":
return {
...state,
count: state.count - 1
}
default:
return state
}
}
export default reduxdatafn
6.store和reduxdatafn绑定
import {createStore} from "redux"
import reduxdatafn from "./reduxdatafn.js"
const store1=createStore(reduxdatafn/*这里需要一个处理函数 函数有数据和数据操作*/)
export default store1
7.创建行为action
export const addCount=()=>{
return {
type:"addCount"
}
}
export const reduceCount=()=>{
return {
type:"reduceCount"
}
}
8.在组件中使用
import React, {Component} from 'react';
//第一步引入 store
import store from "./store";
//4引入action 统一管理
import {addCount,reduceCount} from "./actions"
class ReduxManager extends Component {
add=()=>{
let actions=addCount()//返回对象{type:xx}
//激活redux的数据修改
store.dispatch(actions)
}
reduce=()=>{
let actions=reduceCount()//返回对象{type:xx}
//激活redux的数据修改
store.dispatch(actions)
}
render() {
return (
<div className='ReduxManager'>
//2.通过store.getState()获取数据
reduxManager.jsx的管理{store.getState().count}
//3.通过事件修改数据
<button onClick={this.add}>增加</button>
<button onClick={this.reduce}>减少</button>
</div>
);
}
}
export default ReduxManager;
9.执行实时的渲染
componentDidMount() {
store.subscribe(()=>{
this.setState({})
})
}
10.通用设置实时的渲染
root.render(
<Router>
<App />
</Router>
);
//设置实时的渲染
store.subscribe(()=>{
root.render(
<Router>
<App />
</Router>
);
})