reactjs - 如何使用 Hook、createContext 和 GlobalState 包装器分离动作/reducers 逻辑？

Question

我为我的 Appcontainer 创建了一个包装器，以便我可以随时访问我的 GlobalState。

const App: () => React$Node = () => {
  return (
    <>
      <GlobalState>
        <Appcontainer />
      </GlobalState>
    </>
  );
};

export default App;

我想将 GlobalState 包装器中的大部分逻辑分离到一个单独的文件中。GlobalState 当前如下所示：

import React, {useReducer, useEffect} from 'react';

import MainContext from './MainContext';

const GlobalState: props => React$Node = props => {
  let updatedState = 0;
  const mainReducer = (state, action) => {
    switch (action.type) {
      case 'add':
        console.log('show me the state', state);
        updatedState = state.count + action.payload;
        return {...state, count: updatedState};
      case 'subtract':
        updatedState = state.count - action.payload;
        return {...state, count: updatedState};
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(mainReducer, {count: 0});

  const addDigit = () => {
    dispatch({type: 'add', payload: 1});
  };

  const subtractDigit = () => {
    dispatch({type: 'subtract', payload: 1});
  };

  useEffect(() => {
    console.log('show me the state inside useEffect', state);
  }, [state]);
  return (
    <MainContext.Provider
      value={{
        addDigit: addDigit,
        subtractDigit: subtractDigit,
        updatedState: updatedState,
      }}>
      {props.children}
    </MainContext.Provider>
  );
};

export default GlobalState;

将 mainReducer 放入 reducers.js 文件并将我的两个函数放入它们自己的 actions.js 文件中的最佳方法是什么？

标签： reactjsreact-nativereact-hooks

Answer 1

新的全球状态

import React, {useReducer, useEffect} from 'react';
import {mainReducer, ADD_NUMBER, SUBTRACT_NUMBER} from './reducers';
import MainContext from './MainContext';

/*userReducer is calleed so because it follows that same API as .reduce*/


const initialState = {
  count: 0,
};
const GlobalState: props => React$Node = props => {
  const [state, dispatch] = useReducer(mainReducer, initialState);

  const addDigit = () => {
    dispatch({type: ADD_NUMBER, payload: 1});
  };

  const subtractDigit = () => {
    dispatch({type: SUBTRACT_NUMBER, payload: 1});
  };


  useEffect(() => {
    // console.log('show me the state inside useEffect', state);
  }, [state]);
  return (
    <MainContext.Provider
      value={{
        initialState: initialState,
        addDigit: addDigit,
        subtractDigit: subtractDigit,
        updatedState: state.count,
      }}>
      {props.children}
    </MainContext.Provider>
  );
};

export default GlobalState;

reducers.js 文件

export const ADD_NUMBER = 'ADD_NUMBER';
export const SUBTRACT_NUMBER = 'SUBTRACT_NUMBER';

const addDigit = (state, payload) => {
  const updatedStateValue = state.count;
  return {
    count: updatedStateValue + 1,
  };
};

const subtractDigit = (state, payload) => {
  const updatedStateValue = state.count;

  return {
    count: updatedStateValue - payload,
  };
};

export const mainReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_NUMBER':
      return addDigit(state, 1);
    case 'SUBTRACT_NUMBER':
      return subtractDigit(state, 1);
    default:
      return state;
  }
};