Redux不更新状态

时间:2019-04-17 20:11:53

标签: javascript reactjs redux

我对Redux的问题不更新状态。组件获得正确的初始状态。动作被正确地调度,数据被正确地获取并且可以在减速器内的动作有效载荷中使用。减速器正在执行,选择了开关中的正确情况。只是新状态不会出现在组件中。我还有其他三个组件可以正常工作,只有一个可以破解。

组件

import fetchLinksPage from '../state/links/actions'
...

let Links = ({linksPageLoaded, linksPage, fetchLinksPage}) => {
  useEffect( () => {
      if(!linksPageLoaded) {
        fetchLinksPage()
        console.log(linksPage)
      }
  },[])

  return ( ... )
}

const mapStateToProps = ({linksPageReducer}) => {
  return linksPageReducer
}

const mapDispatchToProps = dispatch => {
  return {
    fetchLinksPage: () => dispatch(fetchLinksPage())
  }
}

Links = connect(mapStateToProps, mapDispatchToProps)(Links)

动作

// action types
export const GET_LINKS_PAGE = 'GETLINKSPAGE'
export const LINKS_PAGE_LOADED = 'LINKSPAGELOADED'
export const LINKS_PAGE_ERROR = 'LINKSPAGEERROR'

// action creators
export const getLinksPage = () => {
  return {
    type: GET_LINKS_PAGE
  }
}
export const linksPageLoaded = (data) => {
  return {
    type: LINKS_PAGE_LOADED,
    payload: data
  }
}

export const linksPageError = (error) => {
  return {
    type: LINKS_PAGE_ERROR,
    payload: error
  }
}

const fetchLinksPage = () => {
  return dispatch => {
    dispatch(getLinksPage())
    fetch('http://portfolio.adamzajac.info/_/items/links?fields=*,logo.*.*')
      .then(response => response.json())
      .then(data => {
        dispatch(linksPageLoaded(data.data))
      })
      .catch( error => {
        dispatch(linksPageError(error))
      })

  }
}

export default fetchLinksPage

减速器

import * as actions from './actions.js'

const linksPageReducer = (state={}, action) => {
  switch (action.type) {
    case actions.GET_LINKS_PAGE:
      return { ...state, linksPageLoading: true }
    case actions.LINKS_PAGE_LOADED:
      //console.log('update state')
      return { ...state, linksPage: action.payload, linksPageLoading: false, linksPageLoaded: true }
    case actions.LINKS_PAGE_ERROR:
      return { ...state, linksPageError: action.payload, linksPageLoading: false}
    default:
      return { ...state, linksPageLoading: false, linksPageLoaded: false, linksPage:[], linksPageError:''}
  }
}

export default linksPageReducer

商店

import aboutPageReducer from './state/about/reducer'
import projectsPageReducer from './state/projects/reducer'
import skillsPageReducer from './state/skills/reducer'
import linksPageReducer from './state/links/reducer'

const rootReducer = combineReducers({
  aboutPageReducer,
  projectsPageReducer,
  skillsPageReducer,
  linksPageReducer
})

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
)

0 个答案:

没有答案