connect
我们会用connect来包裹组件来让改组件使用到上级组件Provider的store
用法是connect(mapStateToProps,mapDispatchToProps)(组件)
使用的使用通过this.props.xxx来使用state，出发action的时候this.props.dispatch()
现在Hooks推出了很多hook来帮助我们实现更好的函数式组件编程。
下面我们实现一个小案例：
0.在app.js跟组件中使用Provider提供store
1.在子组件对redux中的信息进行展示
2.在子组件对年龄这个属性进行递增或者递减
3.在孙组件中对年龄进行重置0
最终样式
一、首先
我们需要准备我们的dispather函数和一些默认信息：
我们在src|store|index.js中写入以下内容，用于初始化store做准备：
export let initInfo = {
name: "六卿",
age: 18,
habby: ["唱歌", "跳舞", "Run"]
}
export const ReduxFun = (state, action) => {
switch (action.type) {
case 'ageAdd':
return {
...state,
age: state.age + 1
};
case 'ageReduce':
return {
...state,
age: state.age - 1
};
case 'change0':
console.log({
...state,
age: 0
})
return {
...state,
age: 0
}
default:
return state
}
}
我们使用export暴露的形式，所以我们在使用的时候需要使用解构的形式：
import {
ReduxFun, initInfo } from './store/index'
二、其次
在App.js中，我们要引入store/index.js,我们要使用初始化好的默认值和dispatch函数
import A from './com/A'
import {
ReduxFun, initInfo } from './store/index'
import {
createStore } from "redux";
import {
Provider} from 'react-redux'
function App() {
let store = createStore(ReduxFun, initInfo)
return (
<div style={
{
border:"5px solid pink",width:"400px",margin:"0 auto",marginTop:"50px",paddingBottom:"30px"}}>
<div style={
{
marginBottom:"30px"}}>我试试APP跟组件</div>
<Provider store={
store}>
<A />
</Provider>
</div>
);
}
export default App;
上面我们做的有两件事：
1：初始化store,使用redux中解构出来的createStore来创建，第一个参数是我们的dispatch函数，第二个参数是我们初始值（初始state）
let store = createStore(ReduxFun, initInfo)
2：将创建好的store通过react-redux中解构出来的Provider组件注入到后代组件中，store={store}
<Provider store={
store}>
<A />
</Provider>
三、最终
1.在（A组件）子组件中使用APP_Provider的state以及修改age的值
首先看一下A组件的代码逻辑：
import React from 'react'
import Achild from './ACHILD'
import {
useDispatch, useSelector } from 'react-redux'
const A = () => {
let dispatch = useDispatch()
const state = useSelector(state => state)
const addAge = () => {
dispatch({
type: 'ageAdd' })
}
const ageReduce = () => {
dispatch({
type: 'ageReduce' })
}
return (
<div style={
{
paddingLeft: "50px", width: "300px" }}>
<div style={
{
border: "2px solid #ccc", marginTop: "30px", padding: "30px" }}>
<div> 我是A组件</div>
姓名：{
state.name} <br />
年龄：{
state.age}<br />
爱好：{
state.habby.join(';')}<br />
<div style={
{
marginTop: "30px" }}></div>
<button style={
{
marginRight: "20px" }} onClick={
addAge}>年龄增加1</button>
<button onClick={
ageReduce}>年龄减少1</button><br />
</div>
<Achild />
</div>
)
}
export default A
这个组件做了两件事：
1.展示state中的属性值：
//获取state中的值
const state = useSelector(state => state)
//在页面展示
姓名：{
state.name} <br />
年龄：{
state.age}<br />
爱好：{
state.habby.join(';')}<br />
2.改变age的值
//获取dispatch
let dispatch = useDispatch()
//点击事件
<button style={
{
marginRight: "20px" }} onClick={
addAge}>年龄增加1</button>
<button onClick={
ageReduce}>年龄减少1</button><br />
//方法函数
const addAge = () => {
dispatch({
type: 'ageAdd' })
}
const ageReduce = () => {
dispatch({
type: 'ageReduce' })
}
这个时候已经可以控制age的增加和减少了，现在我们要看一下孙组件改变state
2.（ACHILD组件）孙组件改变state
import React from 'react'
import {
useDispatch } from 'react-redux'
const ACHILD = () => {
let dispatch = useDispatch()
const changeAge0 = () => {
dispatch({
type: 'change0' })
}
return (
<div style={
{
border: "1px solid orange", marginTop: "30px", padding: "30px" }}>
<div style={
{
marginBottom:"30px"}}> 我是ACHILD组件</div>
<button onClick={
changeAge0}>age重置0</button>
</div>
)
}
export default ACHILD
这个组件只做了一件事
1.出发redux中的dispatch方法，重置age的值
<button onClick={
changeAge0}>age重置0</button>
let dispatch = useDispatch()
const changeAge0 = () => {
dispatch({
type: 'change0' })
}
四、总结
- 使用createStore来创建仓库；
- 使用Provider组件给后代注入创建好的store；
- 后代组件使用useSelector使用state；
- 后代组件使用useDispatch出发action改变state.
参考文章
1.React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
2.redux中使用useSelector、useDispatch替代connect
其他文章
1.hooks实现toDoList
2.hooks实现左添右减
3.React实现添加多行输入框(点击一行增加一行)
4.React页面跳转取消上一个页面的所有请求
5.React配合axios请求拦截校验session，403跳转至登陆页面
六卿
见贤思齐焉，见不贤内自省
