Государственный магазин не обновляется должным образом в Redux - PullRequest
Новая
       6

Государственный магазин не обновляется должным образом в Redux

0 голосов
/ 08 января 2019

Я новичок в Redux и пытаюсь использовать Redux в своем приложении React.

Вот мои редукторы.

Редуктор - 

import {combineReducers} from 'redux';
import dataListReducer from './dataList';

export default combineReducers({
    dataListReducer
})

и редуктор DataList- 

const INITITAL_STATE={gridData:[]}

const dataListReducer=(state=INITITAL_STATE,action)=>{    
switch(action.type){
    default: return {...state}
}
return state;
}

export default dataListReducer;

Вот класс создателя действий - 

export const dataLoaded=(data)=>{
    return {
        type:'full_data',
         payload:{gridData:data}
    }
}

Теперь из приведенного ниже компонента я выполняю вызов Fetch для сети, и когда вызов возвращается, я хочу обновить состояние приложения с использованием самых последних данных - 

 componentDidMount()
{
  FetchService(this.state.url)
    .then((res)=> res.json())
    .then(  (result)=>this.updateState(result)                                   
         ).catch(function(error){console.log(error)});
}


updateState(result)
{
  this.props.dataLoaded(result);  
}

Компонент выполняет вызов для подключения в соответствии с предписаниями - 

const mapStateToProps=(state)=>{  
  console.log(state);
return state;
}

export default connect(mapStateToProps,{dataLoaded})(Main)

Почему console.log не печатает последние данные?

Что мне здесь не хватает?

Пожалуйста, дайте мне знать, если я смогу уточнить.

Ответы [ 3 ]

0 голосов
/ 08 января 2019

То, что вы сделали в своем редукторе, - это верните то же состояние, в котором оно уже было. Так что это пустотный редуктор - как бездействие. Что нужно сделать при возвращении из редуктора, чтобы фактически принять во внимание то, что передается в полезной нагрузке действия.

case "full_data": return { ...state, action.payload }

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

case "full_data": return { ...state, ...gridData: action.payload.gridData }

0 голосов
/ 08 января 2019

Это должно работать для вас. 

const INITITAL_STATE={gridData:[]}

const dataListReducer=(state=INITITAL_STATE,action)=>{    
  switch(action.type){
      case: 'full_data':
        return { ...state, gridData: action.payload.gridData }
      default: return {...state}
  }
}

export default dataListReducer;
0 голосов
/ 08 января 2019

Друг, вы не определили ничего в своем редукторе для обработки действий, которые ему отправлены.

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

const dataListReducer=(state=INITITAL_STATE,action)=>{    
    switch(action.type){
       case "full_data":
          return {...state, myData}
       default: 
          return state
}

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

...