как предотвратить создание избыточного объекта подобным свойством после отправки действия

Question

приведенный ниже код работает нормально, за исключением чего-то странного, начальный реквизит - пустой объект { photos: {} }

после вызова создателя действия состояние в компоненте выглядит как

{ photos: 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)

создатель действия:

export const getPhotos =  () =>{
    return async (dispatch) => {
        const response = await PhotosApi.get('/photos')
        dispatch({
            type:"GET_PHOTOS",
            payload:response
        }) 
    }
}

reducer.js

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

export default combineReducers({
    photos:photosReducer,
})

Answer 1

Ключ здесь combineReducers. Из документов

Вспомогательная функция ОбъединениеReducers превращает объект, значения которого являются различными функциями сокращения, в одну функцию сокращения, которую вы можете передать в createStore.

Полученный редуктор вызывает каждый дочерний редуктор, исобирает их результаты в единый государственный объект. Состояние, создаваемое пространством имен combReducers (), помещает состояния каждого редуктора под их ключами в том виде, в каком они были переданы функции CombReducers ()

Так как вы предоставляете пространству имен photos вашему редуктору, состояние photosReducerнаходится под ключом photos в вашем глобальном состоянии.

Answer 2

Ваш редуктор возвращает объект с photos в качестве свойства. Вместо этого попробуйте вернуть объект, который равен свойству 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,
});