Reactjs 如何防止在分派操作后重复生成相同属性的子对象

下面的代码工作正常，除了一些奇怪的东西， 初始道具是一个空对象

{photos:{}}

调用ActionCreator后，组件中的状态如下

{ photos: photos : {...} }

而我只希望看到

照片：{…}

这是什么原因造成的？如何防止在状态中生成另一个子属性

组成部分：

import {connect} from 'react-redux'
import {getPhotos} from '../actions'
class Photos extends Component {
    constructor(props){
        super(props)
    }
    componentDidMount(){
       this.props.getPhotos();
    }
    invokeFunc= () =>{
        this.props.getPhotos();
    }
    render() {
        return (
            <div>
                <PhotoItem />
                <button onClick={()=> this.invokeFunc()} >call action creator</button>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    const {photos} = state;
    return {
        photos,
    }
}
export default connect(mapStateToProps,{getPhotos})(Photos)

reducer.js

const photosReducer = (state = {}, action) =>{
    if(action.type=="GET_PHOTOS"){
        return {...state, photos:action.payload}
      }
      return state;
}

export default combineReducers({
    photos:photosReducer,
})

---

还原程序正在返回一个对象，其中包含

照片

作为属性。相反，请尝试返回作为photos属性的对象

const photosReducer = (state = {}, action) =>{
  switch(action.type){
    case "GET_PHOTOS":
      return { ...state, action.payload }; // or just `{ action.payload }` if you want it to wipe out the last state

    default:
      return state;
  }
}

export default combineReducers({
  photos:photosReducer,
});

---

这里的关键是组合减速机。来自文档

combineReducers辅助函数将值为不同还原函数的对象转换为一个可传递给createStore的还原函数

生成的reducer调用每个子reducer，并将其结果收集到单个state对象中。combineReducers（）名称空间生成的状态传递给combineReducers（）时，每个减速机键下的状态

因此，由于您将名称空间

photos

提供给您的reducer，

photoreducer

状态处于全局状态的键

photos

下

const photosReducer = (state = {}, action) =>{
  switch(action.type){
    case "GET_PHOTOS":
      return { ...state, action.payload }; // or just `{ action.payload }` if you want it to wipe out the last state

    default:
      return state;
  }
}

export default combineReducers({
  photos:photosReducer,
});