Создание var, ссылающегося на магазин из redux

Question

В настоящее время я работаю над созданием var, который ссылается на магазин из redux. Я создал один, но в пределах render(). Я хочу избежать этого и вызвать его за пределами рендера. Вот пример этого. Мне рекомендовали использовать componentWillMount(), но я не уверен, как его использовать. Вот фрагмент кода, который я реализовал. Примечание: это работает, но только когда я отображаю данные. Я использую double JSON .parse, так как они являются строками с \

  render() {

        var busData= store.getState().bus.bus;
        var driverData= store.getState().driver.gdriveras;
        var dataReady = false;

        if (busData&& driverData) {
            dataReady = true;
            console.log("========Parsing bus data waterout========");
            var bus_data_json = JSON.parse(JSON.parse(busData));
            console.log(bus_data_json);
            console.log("========Parsing driver data waterout========");
            var driver_data_json = JSON.parse(JSON.parse(driverData));
            console.log(driver_datat_json);

            busDatajson.forEach(elem => {
                elem.time = getFormattedDate(elem.time)
            });

            driverDatajson.forEach(elem => {
                elem.time = getFormattedDate(elem.time)
            });
            ...
        }
   }

Answer 1

Вот пример использования react-redux, которое, вероятно, поможет вам. Не забудьте добавить StoreProvider в ваш верхний три компонента (часто называемый App).

Я предупреждал вас о том, что React и Redux не предназначены для использования новичком javascript разработчик. Вам следует подумать о immutability и функциональном программировании.

// ----

const driverReducer = (state, action) => {

  switch (action.type) {
    // ...
    case 'SET_BUS': // I assume the action type
      return {
        ...state,
        gdriveras: JSON.parse(action.gdriveras) // parse your data here or even better: when you get the response
      }
    // ...
  }

}

// same for busReducer (or where you get the bus HTTP response)
// you can also format your time properties when you get the HTTP response


// In some other file (YourComponent.js)
class YourComponent extends Component {

  render() {
    const {
      bus,
      drivers
    } = this.props

    if (!bus || !drivers) {
      return 'loading...'
    }

    const formatedBus = bus.map(item => ({
      ...item,
      time: getFormattedDate(item.time)
    }))

    const formatedDrivers = drivers.map(item => ({
      ...item,
      time: getFormattedDate(item.time)
    }))

    // return children

  }
}


// this add bus & drivers as props to your component
const mapStateToProps = state => ({
  bus: state.bus.bus,
  drivers: state.driver.gdriveras
}) 

export default connect(mapStateToProps)(YourComponent)
// you have to add StoreProvider from react-redux, otherwise connect will not be aware of your store