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

在以往的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