で反応APIを使用して反応Reduxを作成する

こんにちは👋,
この記事では、私たちは自分自身を構築する予定ですreact-redux …の助けを得てcontext API

なぜ我々はRedux反応で必要ですか？

反応では、コンポーネント間のデータを共有する必要があります.それは非常に簡単にreduxの助けを借りて我々はそれを簡単にすることができます状態と反応します.
以下が例です.

const Root = () => {
  const [label, setLabel] = useState()
  return <div>
   <p>{label}</p>
   <Parent setLabel={setLabel}/>
  </div>
};

const Parent = props => {
  return <Child {...props} />;
};

const Child = props => {
  return <Subchild {...props} />;
};

const Subchild = ({ children, setLabel }) => {
  return <div>
   <button onClick={() => setLabel('Hello')}>Set Label</button>
   <p>{children}</p>
  </div>
};

上記の例のアプリで複数のレベルがありますRoot -> Parent -> Child -> Subchild 年にラベルを表示していますRoot レベルと我々は設定しているlabel 子レベルで.このために、我々は通過する必要がありますsetLabel 子プロセスからの子プロセスレベルの不必要です.親と子setLabel しかし、それらの構成要素はそれで何もしていません.ここでは小さな例ですので、どのように我々は大きなリアルタイムアプリケーションでこれらのことを管理することができますか🤔

解決策

リドゥ

どのようにReduxは役立ちますか？

reduxは独立して店(グローバル州)を維持します.コンポーネントから直接Reduxデータをアクセスしたり変異したりできます.上記の問題についてはRoot and Subchild したがって、それらの2つの構成要素が世界的な店のためにアクセスをするので、reduxRoot コンポーネントは同時にラベルにアクセスできますSubchild コンポーネントはラベルを設定することができますParent and Child

発展パートに飛び込みましょう🚀

まず、グローバル状態のコンテキストを作成する必要があります

const {
  createContext,
} = require("react");

const context = createContext();

const { Provider, Consumer } = context;

我々はすぐに作成できるコンテキストを作成するcombineReducers 現在のダミー減速機とともに

const reducer1 = (state, action) => {
  switch (action.type) {
    case "INSERT_X":
      return { ...state, x: action.data };
    case "DELETE_X":
      return { ...state, x: null };
    default:
      return { ...state };
  }
};

const reducer2 = (state, action) => {
  switch (action.type) {
    case "INSERT_Y":
      return { ...state, y: action.data };
    case "DELETE_Y":
      return { ...state, y: null };
    default:
      return { ...state };
  }
};

// zip is util function
const zip = (list1, list2) => {
  var obj = {};
  for (let i = 0; i < list1.length; i++) {
    obj[list1[i]] = list2[i];
  }
  return obj;
};

const combineReducers = (reducers) => {
  return (state, action) => {
    const _reducers = Object.keys(reducers);
    const _state = Object.keys(reducers).map((reducer) => {
      return reducers[reducer](state[reducer], action);
    });

    return zip(_reducers, _state);
  };
};

次に作成する必要がありますProvider App Storeでのinitストアへのメソッドとconnect コンポーネント上で消費する方法

const StoreProvider = ({ children }) => {
  const rootReducer = combineReducers({ reducer1, reducer2 });

  const [state, dispatch] = useReducer(rootReducer, {});

  return <Provider value={{ state, dispatch }}>{children}</Provider>;
};


 const connect = (mapStateTopProps, mapDispatchToProps) => {
  return (Component) => (props) => {
    return (
      <Consumer>
        {({ state, dispatch }) => {
          const dispatchProps = mapDispatchToProps(dispatch);
          const stateProps = mapStateTopProps(state);
          return <Component {...props} {...stateProps} {...dispatchProps} />;
        }}
      </Consumer>
    );
  };
};

状態を変異してアクセスするフックアプローチ

const useSelector = (fn) => {
  const { state } = useContext(context);
  return fn(state);
};

const useDispatch = (fn) => {
  const { dispatch } = useContext(context);

  return dispatch;
};

最後にコードは次のようになります

const {
  useContext,
  createContext,
  useReducer,
  useState,
  useEffect
} = require("react");

const context = createContext();

const { Provider, Consumer } = context;

const reducer1 = (state, action) => {
  switch (action.type) {
    case "INSERT_X":
      return { ...state, x: action.data };
    case "DELETE_X":
      return { ...state, x: null };
    default:
      return { ...state };
  }
};

const reducer2 = (state, action) => {
  switch (action.type) {
    case "INSERT_Y":
      return { ...state, y: action.data };
    case "DELETE_Y":
      return { ...state, y: null };
    default:
      return { ...state };
  }
};

const zip = (list1, list2) => {
  var obj = {};
  for (let i = 0; i < list1.length; i++) {
    obj[list1[i]] = list2[i];
  }
  return obj;
};

const combineReducers = (reducers) => {
  return (state, action) => {
    const _reducers = Object.keys(reducers);
    const _state = Object.keys(reducers).map((reducer) => {
      return reducers[reducer](state[reducer], action);
    });

    return zip(_reducers, _state);
  };
};

const Store = ({ children }) => {
  const rootReducer = combineReducers({ reducer1, reducer2 });

  const [state, dispatch] = useReducer(rootReducer, {});

  return <Provider value={{ state, dispatch }}>{children}</Provider>;
};

export const connect = (mapStateTopProps, mapDispatchToProps) => {
  return (Component) => (props) => {
    return (
      <Consumer>
        {({ state, dispatch }) => {
          const dispatchProps = mapDispatchToProps(dispatch);
          const stateProps = mapStateTopProps(state);
          return <Component {...props} {...stateProps} {...dispatchProps} />;
        }}
      </Consumer>
    );
  };
};

export const useSelector = (fn) => {
  const { state } = useContext(context);
  return fn(state);
};

export const useDispatch = (fn) => {
  const { dispatch } = useContext(context);

  return dispatch;
};

export default Store;

私たちはreduxパート2で行われます👏🏻
アプリケーションでラップコンポーネントを使用するにはStoreProvider 使用connect 状態を消費するコンポーネントで
ここでは例とサンドボックスのリンクです
どうも!
🚨🚨⚠️⚠️ : このコードをプロダクションで使用しないでください.これは教育目的のためだけです.
あなたは今、コーヒーを購入することによってあなたのサポートを拡張することができます.