Как экспортировать object.assign и использовать его содержимое для проверки в другой функции того же файла?

Question

const INITIAL_STATE = {
  otherStates...,
  phase: " "
};

const mapStateToProps = (state) => {
  return {
    phase: state.phase
  }
}
const mapStateToProps = (state) => {
  return {
    phase: state.phase
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onStarting: () => {
      dispatch({type: 'STARTING'})
    }
  }
}
const ConnRootContainer = 
      connect(mapStateToProps, mapDispatchToProps)
      (RootContainer);

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

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case types.STARTING:
      let phase = " "

      if (state.stateOne < state.StateTwo) {
       count = growth(state, 0)
       phase = "START"
      }

      else if (CONDITION) {        
        phase = "PAUSE"
      }

      else {        
        phase = "STOP"
      }

      coordinates = generate(state.coordinates, variable);
      return {
        ...state,
        coordinates: coordinates,
        phase: phase
              }

    case types.OTHER_TYPE:
      OTHER CASE FILES
      }

    default:
      return state      
  }
}

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

let generate = (data, otherData) => { 
   if({this.props.phase} === "START"){ 
  for (let i = 1; i < otherData; i++) {
    let newX = data[i - 1].x  + FORMULA;
    let newY = data[i - 1].y  + FORMULA;
    data.push({ x: newX, y: newY });
  }
}

if({this.props.phase} === "STOP"){
  while (data.length) {
    data.splice(data.length - 1, 1);
  }
}

return data; 
}

Новая ошибка: это зарезервированное слово , поскольку фаза не передана функции.Как я могу улучшить свой код и использовать state.phase в операторе if для проверки?

Answer 1

Основываясь на разговоре с OP, этот код размещается в его редукторе, и, таким образом, приведенное ниже решение было обновлено, чтобы отразить рабочее решение, позволяя OP обновлять состояние на основе action.type внутри его редуктора.

Внутри вашего редуктора вместо использования Object.assign, а затем ничего с ним не делать, вы можете просто перевести его в состояние, которое вы возвращаете, используя деструктурирующее назначение

Смена ключа следующая:

let phase = '';

if (otherState1 < otherState2) phase = 'START';

return {
  ...state,
  phase
}

Решение

const { createStore } = Redux;
const { connect, Provider } = ReactRedux;

// Create RootContainer of App
class RootContainer extends React.Component {
  render () {
    return (
      <div>
        <button onClick={this.props.onStarting}>Set Phase to STARTING</button>
        <p>Phase: {this.props.phase}</p>
      </div>
    )
  }
}
// Functions for ReactRedux.connect
const mapStateToProps = (state) => {
  return {
    phase: state.phase
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    onStarting: () => {
      dispatch({type: 'STARTING'})
    }
  }
}
// Connect React Component to Redux
const ConnRootContainer = 
      connect(mapStateToProps, mapDispatchToProps)
      (RootContainer);

// Setup Initial State
const INITIAL_STATE = {
  otherState1: 1,
  otherState2: 2,
  phase: 'NOT SET'
};

// Define Reducer
function myReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'STARTING':
      const { otherState1, otherState2 } = state;
      let phase = '';

      if (otherState1 < otherState2) phase = 'START';

      return {
        ...state,
        phase
      }
  }

  return state
}

// Connect reducer to Redux
const store = createStore(myReducer);

// Pass store to ReactRedux.Provider
class App extends React.Component {
  render () {
    return (
      <Provider store={store}>
        <ConnRootContainer />
      </Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.0/react-redux.min.js"></script>
<div id="root"></div>

Я не совсем уверен, что Object.assign делает для вас.В одной функции вы возвращаете объект, но в другой функции вы пытаетесь получить доступ к свойству из состояния.

Я бы посоветовал вам сохранить stage в состоянии, чтобы вы могли получить к нему доступ.оттуда позже.Вот решение:

Примечание: Во второй функции вы пытаетесь получить доступ к state.phase, даже если вы сказали, что хотите получить доступ к state.stage

Оригинальное решение

class App extends React.Component { constructor(props){ super(props); this.state = { otherState1: 1, otherState2: 2 } this.getState = this.getState.bind(this); this.doSomething = this.doSomething.bind(this); } getState() { const { otherState1, otherState2 } = this.state; if (otherState1 < otherState2) { this.setState({stage : "START"}) } } doSomething(data, otherData) { const { stage } = this.state; if (stage === "START"){ console.log('phase is START'); } if (stage === "STOP"){ console.log('phase is STOP'); } } render() { return ( <div> <button onClick={this.getState}> Get State </button> <p>{JSON.stringify(this.state)}</p> <button onClick={this.doSomething}> Do Something </button> </div> ); } } ReactDOM.render(<App />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

Хорошо (учитывая, что вы не можете вернуть его, и это один и тот же файл для обеих функций), просто объявите переменную в их общей лексической области:

let object;

function A() {
   object = someValue
}

A()

function B(obj) {
   console.log(obj)
}

B(object)

Конечно, вы должны быть уверены, что B() выполняет после A()

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