react，redux的一些API的理解

是我暂时的一些理解

并未长时间使用react  如果你是react大神 下面的可以不看了 

如果是vue使用者 想了解react 看懂react的代码的同学可以看看

React.createContext

这个有点类似vue的provide 与inject 有一定的穿透的能力 小范围的数据

使用它有两种方式

第一种是配合 Provider Consumer

const {Provider, Consumer} = React.createContext(defaultValue);

一个是传值的属性，一个是接收值得属性

这个接收值暂时我看到是在组件上接收的  

还有第二种接收的方式 useContent

这个API 可以直接帮我们获得上层组件定义的createContext

我更偏向于这个 好记  与usestate使用很类似

 const { state,dispatch } = useContext(ReduceContext);

本质使用上暂时觉得和usestate 没有什么大的区别 这俩的使用场景 也基本一致

所以看到 useContext  就想他就是“useState”就可以啦 也是数据的处理一种

useRef() 类似于vue的ref

对于redux

首先分为两种 以及三个基础的概念

基础概念  都只有一个store

action是一个函数 但是类似于一个参数告诉更改那个state

reducer 用来更改的那个函数的具体执行 用来更改state

第一个是我看到的一个源码的store 已经被弃用了

const store = createStore(

  combineReducers({

    ...commonStore,

  }),

  applyMiddleware(thunk, logger)

);

他们只有一个store  暂时我知道是可以store.getState（）这种方式来获得

官网示例是第二种 也推荐第二种

import { configureStore } from '@reduxjs/toolkit';

import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({

  reducer: {

    counter: counterReducer,

  },

});

 

简单说 就是现在的redux 都使用reduxjs/toolkit的方式创建了

使用state的时候也很简单 

使用API 

const selectCount = (state) => state.counter.value

  const count = useSelector(selectCount);

或者 const count = useSelector(（）=>state.**.***);

这是创建了store  但是 还要创建 action 和reducers

export const counterSlice = createSlice({

  name: 'counter11',

  initialState,

  // The `reducers` field lets us define reducers and generate associated actions

  reducers: {

    incrementByAmount: (state, action) => {

      state.value += action.payload;

    },

  },

  extraReducers: (builder) => {

    builder

      .addCase(incrementAsync.pending, (state) => {

        state.status = 'loading';

      })

      .addCase(incrementAsync.fulfilled, (state, action) => {

        state.status = 'idle';

        state.value += action.payload;

      });

  },

});

这里有两个比较重要的事 一个是initState 声明好  这里是｛value,:0,attr:**｝

所以就是state.conter.value了

另一个就是reducers 这个api 会将reducers自动的生成对应的actions

使用的时候 可以

counterSlice.actions.incrementByAmount

也可以export {incrementByAmount} = counterSlice.actions

然后

  const dispatch = useDispatch();

dispatch（incrementByAmount（值））

就可以了

这里有一个是异步的reducers的特殊处理

要用

createAsyncThunk这个API 

然后在createSlice 的extraReducers 里面将请求得到的结果返回

如果需要全面的学习一下 建议

示例 · Redux

用这个示例的counter 学习一下