я хочу сначала создать сайт электронной коммерции, получить продукты от api по реагированию и редукции

Question

это моя страница редуктора. Я получаю виртуальные данные из json placeholder

    import axios from "axios";
var x = [];
axios.get("https://jsonplaceholder.typicode.com/users")
    .then(res => {
       x= res.data
        console.log(x)
    })

const initState = {
    count: 0,
    data: x


}


const reducer = (state = initState , action) =>{  }

/// app.js page :::

function mapStateToProps(state){
  return{
    count: state.count,
    data : state.data

  }
}

Я не могу отобразить элементыв app.js помогите пожалуйста

Answer 1

Это не совсем так - вы не можете выполнить асинхронную инициализацию в своем редукторе.Вы можете сделать это в своем файле действий или компоненте.

const initState = {
    count: 0,
    data: x // x is loaded async so this won't work
}

const reducer = (state = initState , action) =>{  }

Вы можете поместить его в файл действий следующим образом:

// assuming redux-thunk is installed
export const myAction = args => dispatch => {
  axios.get(...).then(results =>
    dispatch({type: 'INITIALISE_MY_DATA',
              payload: results}) )
}

Затем вы обработаете действие INITIALISE_MY_DATAв твоем редукторе.

Answer 2

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

//do this in componentDidMount of your app root component
import axios from "axios";
//get data
var x = [];
axios.get("https://jsonplaceholder.typicode.com/users")
    .then(res => {
       x= res.data
        store.dispatch(type: "ACTION_TYPE", payload: x) //action type could be anything,

    })

//reducer
const initState = {
    count: 0,
    data: x
}

const reducer = (state = initState , action) =>{
    const newState = {...state};
    switch(action.type){
      case "ACTION_TYPE": //this should match action you have dispatched
        newState.count = action.payload.count;
        newState.data = action.payload.data;
        return newState;
    }
}

и в вашем компоненте

import { connect } from 'react-redux';

class YourComponent extends React.Component{
render(){
    return (
     <div>
       {this.props.data}
     </div>
    )
    }
}
function mapStateToProps(state){
  return{
    count: state.count,
    data : state.data

  }
}

export default connect(mapStateToProps)(YourComponent)

Обратите внимание, что если ваши данные являются массивом, вы, вероятно, должны сначала отобразить массив через массив и сгенерировать элемент для каждого значения, дляпример:

render(){
let newData = [];
this.props.data.forEach((data, i) => {
    newData.push(<div> {data} </div>);
});
return(
{newData}
);
}

Answer 3

Вы должны поместить исходные данные в компонент Провайдера.Обычно это делается в index.js или App.js.App.js должен быть компонентом класса, а в функции componentDidMount () вызвать этот API и получить ответ.Затем обновите хранилище в провайдере, чтобы он знал о начальном состоянии.