Redux reducer未更新store问题求助：redux-promise未解析

嘿，刚上手Redux的时候我也踩过一模一样的坑！咱们一步步拆解问题，把store不更新、redux-promise没解析的问题解决掉：

1. 先确认redux-promise中间件是否正确配置 #

redux-promise的核心作用是自动解析action里的Promise payload，所以第一步要确保它被正确加入到store的中间件链里：

// index.js 里的store创建代码
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import rootReducer from './reducers';

// 必须把promiseMiddleware传入applyMiddleware
const store = createStore(
  rootReducer,
  // 如果有其他中间件（比如redux-devtools），也要保证顺序正确
  applyMiddleware(promiseMiddleware)
);

如果这里漏加了中间件，action里的Promise根本不会被解析，reducer自然拿不到数据。

2. 检查fetchAllMonths action的结构是否符合要求 #

redux-promise要求action的payload字段必须是一个未被解析的Promise，而不是已经resolve的数据。你的action应该写成这样：

// fetchAllMonths action文件
export const fetchAllMonths = () => {
  // 直接返回Firebase的Promise，不要提前then解析
  const fetchPromise = firebase.database().ref('/months').once('value')
    .then(snapshot => snapshot.val());
  
  return {
    type: 'FETCH_ALL_MONTHS',
    payload: fetchPromise // 关键：这里必须是Promise实例
  };
};

如果你提前用then把数据解析了再传给payload，redux-promise就不会触发解析逻辑，相当于直接给reducer传了普通数据，这时候如果reducer没处理对，也会导致store不更新。

3. 验证reducer是否正确监听action并更新state #

先检查你的reducer有没有正确捕获FETCH_ALL_MONTHS类型的action，并且返回了新的state（Redux要求必须返回新对象，不能直接修改原state）：

// 对应months的reducer文件
const initialState = {
  data: [] // 初始化空数据
};

export default function monthsReducer(state = initialState, action) {
  switch(action.type) {
    case 'FETCH_ALL_MONTHS':
      // 这里的action.payload应该是redux-promise解析后的Firebase数据
      return {
        ...state, // 解构原state，保留其他字段
        data: action.payload
      };
    default:
      return state;
  }
}

另外还要确认rootReducer里正确合并了这个reducer：

// reducers/index.js
import { combineReducers } from 'redux';
import monthsReducer from './monthsReducer';

export default combineReducers({
  months: monthsReducer // 这个key要和组件里取state的路径对应
});

4. 检查组件与Redux的连接是否正确 #

最后确保你的App组件通过connect正确映射了state和action：

// App.js
import { connect } from 'react-redux';
import { fetchAllMonths } from './actions/fetchAllMonths';

class App extends Component {
  handleFetchData = () => {
    // 点击按钮触发action
    this.props.fetchAllMonths();
  };

  render() {
    // 这里打印看看props里有没有拿到数据
    console.log('Redux state里的months数据:', this.props.monthsData);
    return (
      <div>
        <button onClick={this.handleFetchData}>获取数据</button>
        {/* 展示数据的逻辑 */}
        {this.props.monthsData && Object.values(this.props.monthsData).map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  // 对应rootReducer里的key + reducer里的字段
  monthsData: state.months.data
});

// 把action映射到props
export default connect(mapStateToProps, { fetchAllMonths })(App);

备选方案：如果redux-promise还是有问题，试试redux-thunk #

有时候redux-promise的自动解析逻辑会让人摸不着头脑，改用redux-thunk手动分发action可能更直观：

1. 安装并配置redux-thunk中间件：

// index.js
import thunk from 'redux-thunk';
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

2. 修改action为返回函数的形式：

export const fetchAllMonths = () => dispatch => {
  firebase.database().ref('/months').once('value')
    .then(snapshot => {
      const data = snapshot.val();
      console.log('Firebase返回的数据:', data);
      // 手动分发带有解析后数据的action
      dispatch({
        type: 'FETCH_ALL_MONTHS',
        payload: data
      });
    })
    .catch(err => console.error('请求失败:', err));
};

这种方式你能完全掌控异步流程，更容易排查问题。

按上面的步骤一步步排查，应该就能找到store不更新的原因啦！

内容的提问来源于stack exchange，提问作者grhu