Передача значения в состояние - redux - PullRequest
Новая
       4

Передача значения в состояние - redux

0 голосов
/ 09 июля 2020

Я создал в React калькулятор. Теперь я хотел бы использовать глобальное, а не локальное состояние - я знаю, что у этого решения может не быть более крупного сеанса, но я хочу таким образом изучить redux. Подготовил действие и редуктор. Не знаю, как передать значения - получаю ошибку с несуществующей переменной результата.

Ссылка на приложение с локальным статусом:
https://codesandbox.io/s/calculator-9dq6i?file= / src / Cal c. js: 691-705
Ссылка на приложение с помощью redux:
https://codesandbox.io/s/gifted-shirley-uonew?file= / src / reducers / index. js: 0-292
Код: index. js

import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import App from "./components/App";
import calculate from "./reducers";

const store = createStore(calculate);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

reducer - index. js

const calculate = (state, action) => {
  switch (action.type) {
    case "ADD_TO_MEMORY":
      result += id;
      return result;

    case "ADD":
      result = parseFloat(result) + parseFloat(prev);
      return result;

    default:
      return result;
  }
};

export default calculate;

действие - index. js

let prev = "";
let result = "";
let current = "";
let disabled = true;

export const addToMemory = id => ({
  type: "ADD_TO_MEMORY",
  result: result
});

export const add = result => ({
  type: "ADD",
  result: result
});

Приложение . js

import React from "react";
import Counter from "./Counter";

const App = () => (
  <div>
    <Counter />
  </div>
);

export default App;

Счетчик. js

import React from "react";
import { connect } from "react-redux";
import { addToMemory, add } from "../actions/index";

const Counter = ({ dispatch, result }) => {
  return (
    <p>
      <button id="1" onClick={addToMemory("1")}>
        1
      </button>
      <button id="1" onClick={addToMemory("2")}>
        2
      </button>
      <button id="1" onClick={addToMemory("3")}>
        3
      </button>
      <button id="1" onClick={addToMemory("4")}>
        4
      </button>
      <button id="1" onClick={addToMemory("5")}>
        5
      </button>
      <button id="1" onClick={addToMemory("6")}>
        6
      </button>
      <button id="1" onClick={addToMemory("7")}>
        7
      </button>
      <button id="1" onClick={addToMemory("8")}>
        8
      </button>
      <button id="1" onClick={addToMemory("9")}>
        9
      </button>
      <button id="1" onClick={addToMemory("0")}>
        0
      </button>
      <p>RESULT: {result}</p>
    </p>
  );
};

export default connect()(Counter);

1 Ответ

0 голосов
/ 09 июля 2020

Возможно, здесь я смогу прояснить некоторые фундаментальные недоразумения, и это поможет вам встать на правильный путь.

Вы на правильном пути, но нужно внести некоторые изменения:

  1. Вам необходимо иметь как mapDispatchToProps, так и mapStateToProps, чтобы делать то, что вы хотите делать в своем Counter.js файле. mapStateToProps позволит вам сказать Redux: «Какое состояние мне нужно для доступа внутри моего компонента?» Точно так же mapDispatchToProps позволит вам сообщить Redux: «К каким создателям действий мне нужно получить доступ внутри моего компонента?»

Здесь вам необходимо получить доступ предположительно state.result для вашего состояния, поэтому ваш mapStateToProps может выглядеть примерно так: 

const mapStateToProps = (state) => ({
   result: state.result
})

Точно так же mapDispatchToProps может выглядеть так: 

const mapDispatchToProps = {
   addToMemory
}

Затем вы можете связать его с: 

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Затем вы можете получить к нему доступ внутри своего компонента, выполнив от ({result, addToMemory}) до деструктуризацию этих свойств и используя их в компоненте Counter.

Ваш редуктор - это функция , которая принимает два параметра: предыдущее состояние и объект действия и возвращает совершенно новое состояние. Этот не должен изменять какие-либо существующие переменные. Он должен возвращать новую информацию. См. docs для получения дополнительной информации. Когда вы отправляете addToMemory, он имеет два поля в объекте: type и result. В вашем редукторе вы можете получить к ним доступ, выполнив action.type и action.result соответственно. Вот почему вы получаете эту ошибку.

В вашем файле action/index.js создатель действия add принимает id, но ссылается на result. Измените параметр так, чтобы вместо этого он принимал result, чтобы не было ошибок.

Может быть полезно при отладке для выполнения некоторых console.log операторов различных переменных или используйте расширение Redux DevTools Chrome, чтобы помочь отладить некоторые проблемы.

...