useContext配合React.createContent实现传统redux功能

2022-07-06 10:13:43 阅读：167 来源： 互联网

标签：count const React export useContext createContent import redux data

在以往的redux中要实现数据共享需要配置文件例如配置redux中的reducer和action文件以及根文件

在一个组件中还需要将配置的文件利用connect进行链接,对于一些项目来说这些显得略微的复杂:

就比如是实现一个对count值的改变功能:就需要:

Action文件:

import {ADD_COUNT,SUB_COUNT} from '../constent'
import store from '../index'
export const addCount = (data)=>({type:ADD_COUNT, data:data})
export const subCount = (data)=> ({type:SUB_COUNT,data:data})
export function createIncrementAsyncAction(data,time) {
    return ()=>{
        setInterval(()=>{
            store.dispatch(addCount(data))
        },time)
    }
}

Reducer文件:

import {ADD_COUNT,SUB_COUNT} from '../constent'
const initState =0
//如果不想写函数名字,那么要在函数上面加上一行注释: eslint-disable-next-line
export default function changeCount(preState=initState,action){
    const {type,data} = action
    switch (type) {
        case ADD_COUNT:
            return preState+=data
        case SUB_COUNT:
            return preState-=data
        default:
            return preState
    }

}
Store文件:

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {combineReducers} from 'redux'
import changeCount from './reducers/count'
const allReducer =combineReducers({
    count:changeCount
})
const store=createStore(
        allReducer,
    applyMiddleware(thunk)

)
export default store
在组件中的使用:

import {Fragment,Component} from 'react'
import {connect} from 'react-redux'
import {addCount,subCount} from '../redux/actions/count'
class About extends Component{
    render(){
        const {count} =this.props
    return(
        <Fragment>
            <h1>{count}</h1>
            About...
            <button onClick={
                ()=>{
                    console.log(11)
                    this.props.add(1)
                }
            }>点我加一</button>
        </Fragment>
        )
    }
}
export default connect(
    state=>({
        count:state.count
    }),
    {
        add:addCount,
        sub:subCount
    }
)(About)

这多少有点脱了裤子放屁了
那么看一下用useContext和React.createContext配合做出来的效果:

import React, { useState,Fragment} from 'react'
import App from '../App'
export const MyContext = React.createContext()
export  function Store() {
    //是不是可以再把数据和文件导出去
    const [count,setCount] =useState({
        name:'张三',
        age:18
    })
    function changeCount(name,age=18) {
        setCount({
            name,
            age
        })
    }
    return(
        <Fragment>
            <MyContext.Provider value={
                {
                    count,
                    changeCount
                }
            }>
            <App/>
            </MyContext.Provider>
        </Fragment>
    )

}
redux的思想我感觉就是将一些共有的状态保存到一个文件中,基于这个思想,利用React.createContext创建上下问对像,在Provider方法将数据和方法传入所有子组件中这样似乎也可以实现这种需求
代码如下:

import {Button} from 'antd'
import {useContext} from 'react'
import {MyContext} from "../store";
export default function Footer(props) {
 const v={...useContext(MyContext)}
    console.log(v);
    const handelClick=()=> {
        v.changeCount('李四')
    }
    return(
        <div>
            <div>
                    <h1>我是从App中拿到的数据---{v.count.name}</h1>
                <Button onClick={handelClick}>修改App中的名字</Button>
            </div>
        </div>

    )
}

这样看来似乎是简单多了,当然了随着工程量的变大,我们也可以将定义的数据和方法拉倒外面分别定义两个文件,这样似乎又和redux有异曲同工之妙,
我还是在慢慢探索探索吧0.0

标签：count,const,React,export,useContext,createContent,import,redux,data
来源： https://www.cnblogs.com/wn0615/p/16435655.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

useContext配合React.createContent实现传统redux功能