Это правильный путь для передачи состояния в действие Redux?

Question

Я использую карту, чтобы получить идентификаторы из массива объектов в рендере.

Мой код:

class AppliedCandidates extends Component {

  render() {
    const {
      appliedjobs
    } = this.props
    const {
      joblists
    } = this.props {
      joblists && joblists.map(joblist => {
        this.props.getAppliedJobs(joblist.id)
      })
    }
    return ( <
      div > {
        appliedjobs && appliedjobs.map(appliedjob => {
          return <ol >
            <
            li > {
              appliedjob.jobid
            } < /li> <
            li > {
              appliedjob.candidatephoneno
            } < /li> <
            /ol>
        })
      } <
      /div> 
    );
  }
}

const mapStateToProps = (state) => {
  console.log("state", state);
  return {
    joblists: state.getJobs.job,
    appliedjobs: state.getAppliedJobs.appliedjob
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    getAppliedJobs: (joblists) => dispatch(getAppliedJobs(joblists))
  }
}

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

и в следующем коде, который находится в Redux action.js, если я раскомментирую переменную массива "applyjobs", процесс перейдет в бесконечный цикл.Если я закомментирую это, я получу только последнее значение.

var appliedjobs = []

const getAppliedJobs = (joblists) => {
  return (dispatch, getState, {
    getFirebase,
    getFirestore
  }) => {
    const firestore = getFirestore();
    firestore.collection('Jobs').doc(joblists).collection('AppliedJobs').where("jobid", "==", joblists)
      .get()
      .then((querySnapshot) => {
        if (querySnapshot.empty === true) {
          dispatch({
            type: 'GET_APPLIED_JOB_ERROR',
            joblists
          });

        } else {
          //appliedjobs =[] 
          querySnapshot.forEach(function(doc3) {
            appliedjobs.push({
              candidatephoneno: doc3.data().candidatephoneno,
              jobid: doc3.data().jobid,
            });
          });
          dispatch({
            type: 'GET_APPLIED_JOB',
            payload: appliedjobs
          });
        }
      })
  }
};

Как получить значения?

Answer 1

Как сказал Дор Шинар, не вызывайте действия для функции рендеринга.Зачем?Потому что функция рендеринга будет вызываться каждый раз при обновлении любого реквизита / состояния.Поэтому, если вы вызовете действие там, вы будете продолжать повторную визуализацию своей страницы, так как вы будете получать новые обновленные реквизиты от отправленного действия.

Я не уверен в вашем действии, так как никогдаиспользовать огненную базу.Но я предполагаю, что это несколько запросов запросов.

class AppliedCandidates extends Component {
componentDidMount() {
  // here, the joblists props will get automatically updates from the dispatched redux action, dont mutate/change the props by yourself, change it via action.

  const { getAppliedJobs, joblists } = this.props;
  getAppliedJobs(joblists); // to be honest, why your action have the input of array and you put up id of individual array item? So I just put the entire joblists as the function parameter.

}

render() {
  const { appliedjobs } = this.props;

  if (appliedjobs.length === 0) {
    return null;
  }

  return ( // you can add more
    <ol>
      {appliedjobs.map(appliedjob => <li>{appliedjob.id}</li>)}
    </ol>
  )
}

const mapStateToProps = (state) => {
  return {
    joblists: state.getJobs.job,
    appliedjobs: state.getAppliedJobs.appliedjob
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getAppliedJobs : (joblists) => dispatch(getAppliedJobs(joblists))
  }
}

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

Answer 2

Вы не должны отправлять действия в вашей функции render.Если вам нужно заполнить данные, отправив действия в хранилище, вы должны сделать это методом жизненного цикла, в этом случае я думаю, что componentDidUpdate подходит лучше всего.из документации Facebook :

componentDidUpdate () вызывается сразу после обновления.Этот метод не вызывается для начального рендеринга.

Используйте его как возможность работать с DOM, когда компонент был обновлен.Это также хорошее место для выполнения сетевых запросов, если вы сравниваете текущий реквизит с предыдущими реквизитами (например, сетевой запрос может не потребоваться, если реквизиты не изменились).