パス文字列からReduxの状態を変更するにはどうすればよいですか?

ルスランネック

私はこのような初期状態を持っています:

const initialState = {
  array: [
    {
      key: "value",
      obj: {
        key1: "value",
        key2: "value",
      },
      array: [
        {
          key: "value",
          obj: {
            key1: "value",
            key2: "value",
          },
        }
      ]
    },
    {
      key: "value",
      obj: {
        key1: "value",
        key2: "value",
      },
    },
    {
      key: "value",
      obj: {
        key1: "value",
        key2: "value",
      },
    },
  ],
  path: "",
  value: ""
};

レデューサー:

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_PATH":
      return {
        ...state,
        path: action.path
      };

    case "SET_NEW_VALUE":
      return {
        ...state,
        newValue: action.value
      };

    case "SET_NEW_BUILD":
      //What next?

    default:
      return state
  }
};

アクションクリエーター:

const setPath = (path) => ({type: "SET_PATH", path});
const setNewValue = (value) => ({type: "SET_NEW_VALUE", value});
const setNewBuild = (path, value) => ({type: "SET_NEW_BUILD", path, value});

そして、パス文字列と新しい値を使用して、このディスパッチ後にこの状態を変更する必要があります。

dispatch(setNewBuild("array[0].obj.key1", "newValue");

また、値は「obj:{key1: "newValue"、key2: "newValue"}」のような形式にすることができるため、新しいオブジェクトが作成されます。

これどうやってするの?

HMR

セットヘルパーを使用した例を次に示します。

const REMOVE = () => REMOVE;
//helper to get state values
const get = (object, path, defaultValue) => {
  const recur = (current, path, defaultValue) => {
    if (current === undefined) {
      return defaultValue;
    }
    if (path.length === 0) {
      return current;
    }
    return recur(
      current[path[0]],
      path.slice(1),
      defaultValue
    );
  };
  return recur(object, path, defaultValue);
};
//helper to set state values
const set = (object, path, callback) => {
  const setKey = (current, key, value) => {
    if (Array.isArray(current)) {
      return value === REMOVE
        ? current.filter((_, i) => key !== i)
        : current.map((c, i) => (i === key ? value : c));
    }
    return value === REMOVE
      ? Object.entries(current).reduce((result, [k, v]) => {
          if (k !== key) {
            result[k] = v;
          }
          return result;
        }, {})
      : { ...current, [key]: value };
  };
  const recur = (current, path, newValue) => {
    if (path.length === 1) {
      return setKey(current, path[0], newValue);
    }
    return setKey(
      current,
      path[0],
      recur(current[path[0]], path.slice(1), newValue)
    );
  };
  const oldValue = get(object, path);
  const newValue = callback(oldValue);
  if (oldValue === newValue) {
    return object;
  }
  return recur(object, path, newValue);
};
const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore } = Redux;

//action
const setNewBuild = (path, value) => ({
  type: 'SET_NEW_BUILD',
  path,
  value,
});
const initialState = {
  array: [
    {
      key: 'value',
      obj: {
        key1: 'value',
        key2: 'value',
      },
    },
  ],
  path: '',
  value: '',
};
const reducer = (state = initialState, action) => {
  const { type } = action;
  if (type === 'SET_NEW_BUILD') {
    const { path, value } = action;
    return set(state, path, () => value);
  }
  return state;
};
const store = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
);
const App = () => {
  const state = useSelector((x) => x);
  const dispatch = useDispatch();
  return (
    <div>
      <button
        onClick={() =>
          dispatch(
            setNewBuild(
              ['array', 0, 'obj', 'key1'],
              'new value key 1'
            )
          )
        }
      >
        change array 0 obj key1
      </button>
      <button
        onClick={() =>
          dispatch(
            setNewBuild(['array', 0, 'obj'], {
              key1: 'change both key1',
              key2: 'change both key2',
            })
          )
        }
      >
        change array 0 obj
      </button>
      <pre>{JSON.stringify(state, undefined, 2)}</pre>
    </div>
  );
};
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>


<div id="root"></div>

重要なビットは次のとおりです。

<button
  onClick={() =>
    dispatch(
      // path is an array
      setNewBuild(['array', 0, 'obj'], {
        key1: 'change both key1',
        key2: 'change both key2',
      })
    )
  }
>
  change array 0 obj
</button>

そしてレデューサーで:

const { type } = action;
if (type === 'SET_NEW_BUILD') {
  const { path, value } = action;
  return set(state, path, () => value);
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

状態をreduxから変更して色を変更するにはどうすればよいですか?

分類Dev

redux状態でプロパティを追加/変更するにはどうすればよいですか?

分類Dev

redux状態でプロパティを追加/変更するにはどうすればよいですか?

分類Dev

ゲストがreduxの状態を変更できるようにするにはどうすればよいですか?

分類Dev

複数の入力の状態を処理し、それらの状態を親から変更するにはどうすればよいですか?

分類Dev

チェックボックスの状態を変更するにはどうすればよいですか?

分類Dev

文字列とその状態をリストに保存するにはどうすればよいですか?

分類Dev

Reduxの場合:配列内のブール値の状態を変更するにはどうすればよいですか?

分類Dev

useEffectから現在のredux状態にアクセスするにはどうすればよいですか?

分類Dev

getCellActionsから状態を変更するにはどうすればよいですか?

分類Dev

Redux状態から特定のアイテムを削除するにはどうすればよいですか?

分類Dev

Redux:他の状態に基づいて状態を作成するにはどうすればよいですか?

分類Dev

コンポーネント内の関数から呼び出すときに、状態変更をreduxにディスパッチするにはどうすればよいですか?

分類Dev

変更せずに反応状態配列を複製するにはどうすればよいですか?

分類Dev

Reactjsで状態変数の値を変更するにはどうすればよいですか?

分類Dev

状態に由来する文字列の改行を検出するにはどうすればよいですか?

分類Dev

setStateの直後にsetTimeoutで反応状態を変更するにはどうすればよいですか?

分類Dev

実行時にUIMenu内のUIActionの状態を変更するにはどうすればよいですか?

分類Dev

Swiftを使用してiOSでUIButtonの状態を変更するにはどうすればよいですか?

分類Dev

reduxツールキットを使用してredux状態の配列から単一の要素を削除するにはどうすればよいですか?

分類Dev

StatefulWidgetクラスの「状態」を外部関数から変更するにはどうすればよいですか?

分類Dev

axiosインターセプターからコンテキストの状態を変更するにはどうすればよいですか?

分類Dev

Reactクラスの外部からモーダル状態を変更するにはどうすればよいですか?

分類Dev

JHipsterで休止状態のログレベルを変更するにはどうすればよいですか?

分類Dev

Angular 6でボタンの状態を変更するにはどうすればよいですか?

分類Dev

Reactで2つの状態を正しく変更するにはどうすればよいですか?

分類Dev

Javascriptでキーフレームの状態を変更するにはどうすればよいですか

分類Dev

状態の一部のみを変更するにはどうすればよいですか?

分類Dev

F#で状態を変更しないようにするにはどうすればよいですか?

Related 関連記事

  1. 1

    状態をreduxから変更して色を変更するにはどうすればよいですか?

  2. 2

    redux状態でプロパティを追加/変更するにはどうすればよいですか?

  3. 3

    redux状態でプロパティを追加/変更するにはどうすればよいですか?

  4. 4

    ゲストがreduxの状態を変更できるようにするにはどうすればよいですか?

  5. 5

    複数の入力の状態を処理し、それらの状態を親から変更するにはどうすればよいですか?

  6. 6

    チェックボックスの状態を変更するにはどうすればよいですか?

  7. 7

    文字列とその状態をリストに保存するにはどうすればよいですか?

  8. 8

    Reduxの場合:配列内のブール値の状態を変更するにはどうすればよいですか?

  9. 9

    useEffectから現在のredux状態にアクセスするにはどうすればよいですか?

  10. 10

    getCellActionsから状態を変更するにはどうすればよいですか?

  11. 11

    Redux状態から特定のアイテムを削除するにはどうすればよいですか?

  12. 12

    Redux:他の状態に基づいて状態を作成するにはどうすればよいですか?

  13. 13

    コンポーネント内の関数から呼び出すときに、状態変更をreduxにディスパッチするにはどうすればよいですか?

  14. 14

    変更せずに反応状態配列を複製するにはどうすればよいですか?

  15. 15

    Reactjsで状態変数の値を変更するにはどうすればよいですか?

  16. 16

    状態に由来する文字列の改行を検出するにはどうすればよいですか?

  17. 17

    setStateの直後にsetTimeoutで反応状態を変更するにはどうすればよいですか?

  18. 18

    実行時にUIMenu内のUIActionの状態を変更するにはどうすればよいですか?

  19. 19

    Swiftを使用してiOSでUIButtonの状態を変更するにはどうすればよいですか?

  20. 20

    reduxツールキットを使用してredux状態の配列から単一の要素を削除するにはどうすればよいですか?

  21. 21

    StatefulWidgetクラスの「状態」を外部関数から変更するにはどうすればよいですか?

  22. 22

    axiosインターセプターからコンテキストの状態を変更するにはどうすればよいですか?

  23. 23

    Reactクラスの外部からモーダル状態を変更するにはどうすればよいですか?

  24. 24

    JHipsterで休止状態のログレベルを変更するにはどうすればよいですか?

  25. 25

    Angular 6でボタンの状態を変更するにはどうすればよいですか?

  26. 26

    Reactで2つの状態を正しく変更するにはどうすればよいですか?

  27. 27

    Javascriptでキーフレームの状態を変更するにはどうすればよいですか

  28. 28

    状態の一部のみを変更するにはどうすればよいですか?

  29. 29

    F#で状態を変更しないようにするにはどうすればよいですか?

ホットタグ

アーカイブ