Попытка вернуть массив из хранилища Redux, но возврат пустого массива

Question

Я пытаюсь вернуть извлеченный массив из хранилища Redux, но возвращаю пустой массив. Кстати, fetch работает хорошо. Я не могу найти ошибку

Возможно, ошибка в редукторе, или у меня просто есть {connect}

выборка данных из tmdb здесь, возвращаемый массив

action.js

export function itemFetchMovies() {
    return function (dispatch) {
        return fetch(url, {method: 'GET'})
            .then(response => response.json())
            .then(data => {
                console.log(data);
                let movies = [];

                let currentCount = 1;
                function makeCounter() {
                    return function() {
                        return currentCount++;
                    };
                }

                let counter = makeCounter();
                for (let i = 0; i < data.results.length; i++) {
                    let image_url = "https://image.tmdb.org/t/p/w500" + data.results[i].poster_path;
                    movies.push({
                        key: {i},
                        number: counter(),
                        poster: <img
                            src={image_url}
                            alt="new"
                            style={{width: 50, height: 50}}
                        />,
                        title: data.results[i].original_title,
                        year: data.results[i].release_date
                    })
                }
                console.log(movies);
                dispatch(
                            {
                                type: 'ITEMS_FETCH_DATA_SUCCESS',
                                payload: movies
                            }
                        );
            });
    }
}

Редуктор Redux, просто хочу обменять начальное состояние на извлеченные данные

reducer.js

const initalState = {
    list: []
};


export function items(state = initalState, action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return {
                ...state,
                list: action.payload
            };

        default:
            return state ;
    }
}

в componentDidMount вызывает мою функцию выборки через состояния, используйте {connect} для соединения porps и сохранения

App.js


class App extends React.Component {
    componentDidMount() {
        this.props.fetchMovie();
        console.log(this.props)
    }

    render() {
        return (
            <div>
            </div>
        );
    }
}


App.propTypes = {
    fetchMovie: PropTypes.func.isRequired,
    list: PropTypes.array.isRequired,
};


const mapStateToProps = (state) => {
    return {
        list: state.list,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchMovie: () => dispatch(itemFetchMovies())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(App)

index.js

const store = createStore(items, applyMiddleware(thunk));
console.log(store.getState());

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

Answer 1

Позвольте мне прояснить вам это,

Выпуск

подключить только сравнить мелкое изменение данных, означает изменение уровня 1 глубины. В вашем случае вы изменяете в массиве фильмов, подключение которого не удается получить и оно не перерисовывается.

Любое изменение глубины объекта или массива, как вы сделали, не будет вызывать рендеринг, потому что connect не будет знать, что значения внутри объекта / массива изменены.

Решение

Вам нужно добавить переменную counter, которая только увеличивает себя в редукторе и просто входит в mapStateToProps в качестве prop, который вам не нужно использовать где-либо еще, только чтобы сообщить, что вы изменили что-то внутри массива / объект.

в редукторе

вернитесь вот так

dispatch(
 {
  type: 'ITEMS_FETCH_DATA_SUCCESS',
  payload: movies,
  counter: state.counter++,
 }
);

в контейнере

const mapStateToProps = (state) => {
    return {
        list: state.list,
        counter: state.counter,
    };
};

надеюсь, что это даст вам помощь и решение.