Redux保存值失效：原功能正常，更换属性名后无法存储

Let's walk through the issues in your code and fix them one by one—you're close, just a few missteps with how Redux actions, reducers, and component connections work.

1. You’re Registering an Action Creator as a Reducer (Biggest Issue) #

In your root reducer config, you added saveColor: saveColor to combineReducers, but saveColor is an action creator function, not a reducer. Reducers handle state updates, while action creators only generate actions. You only need your general reducer here since it’s supposed to handle the SAVE_COLOR action:

// Root reducer fix
import general from './reducers/general.js'
export default (history) => combineReducers({
 auth: auth,
 router: connectRouter(history),
 general: general, // Remove the `saveColor: saveColor` line entirely
})

2. Action Import/Export Mismatch #

Your actions file uses a default export for levelUp/levelDown and a named export for saveColor, but your component is importing them incorrectly. Fix the imports in your Swatch component:

// Wrong imports
import general from '../actions/general'
import saveColor from '../actions/general'

// Correct imports
import { saveColor } from '../actions/general' // Use named import for saveColor
import generalActions from '../actions/general' // Optional, if you need levelUp/levelDown later

3. Reducer State Shape Is Broken #

Your general reducer starts with an initial state of 1 (a number), but when SAVE_COLOR runs, you return an object {color: action.payload}. This changes the state type entirely, which will break any future logic that expects a number (like your old LEVEL_UP/LEVEL_DOWN actions). Instead, use an object as the initial state to hold both level and color:

// reducers/general.js fix
import Actions from '../actions/general.js'

export default (state = { level: 1, color: null }, action) => {
 switch (action.type) {
 case Actions.LEVEL_UP: 
   return { ...state, level: state.level + 1 }; // Keep existing state, update level
 case Actions.LEVEL_DOWN: 
   return { ...state, level: state.level - 1 };
 case Actions.SAVE_COLOR: 
   return { ...state, color: action.payload }; // Keep existing state, update color
 default:
   return state; // Always include a default case to avoid unexpected behavior!
 }
};

4. mapDispatchToProps Is Misconfigured #

bindActionCreators expects an object of action creators as its first argument, not a single function. Fix your mapDispatchToProps to wrap saveColor in an object:

// Component mapDispatchToProps fix
import { bindActionCreators } from 'redux';
import { saveColor } from '../actions/general'

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ saveColor }, dispatch);
}

// Or even simpler—skip bindActionCreators entirely:
function mapDispatchToProps(dispatch) {
 return {
   saveColor: (color) => dispatch(saveColor(color))
 };
}

5. Update mapStateToProps to Match the New State Shape #

Since your general state is now an object, adjust mapStateToProps to pull the right values for your component:

const mapStateToProps = (state) => {
 return { 
   currentLevel: state.general.level,
   selectedColor: state.general.color 
 };
};

Final Check #

After these fixes, when your component calls this.props.saveColor(500), the SAVE_COLOR action will be dispatched, the general reducer will update the color property in its state object, and your component will receive the updated color via props.selectedColor.

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