с помощью крючков с реактивным редуксом. Редуктор не попал. Нет государства - PullRequest
Новая
       34

с помощью крючков с реактивным редуксом. Редуктор не попал. Нет государства

0 голосов
/ 24 января 2020

Я работаю над реактивным приложением, использующим приставку с крючками. Вот мой создатель действий ниже 

    PostAction
    ***********
    import * as types from "./actionTypes";
    import axios from 'axios';

    const ROOT_URL = 'http://dotsuper.com/api'

    export function fetchPosts(){
        const request = axios.get(`${ROOT_URL}/post/getposts`)

        return {
            type: types.GETALL_POSTS,
            payload: request
        }
    }

Вот мой редуктор ниже 

    PostReducer
    ************

    import _ from 'lodash';
    import * as types from "../actions/actionTypes";

    export default function postReducer(state = [], action) {
      switch (action.type) {
        case types.GETALL_POSTS:
          debugger;
          console.log(action.payload.data);
          return _.mapKeys(action.payload.data, 'id');
        default:
          return state;
      }
    }

Вот как выглядит конфигурация моего магазина 

    configureStore
    ***************
    import { createStore, applyMiddleware, compose } from "redux";
    import rootReducer from "./reducers";
    import reduxImmutableStateInvariant from "redux-immutable-state-invariant";
    import thunk from 'redux-thunk';

    export default function configureStore(initialState) {
      const composeEnhancers =
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //add support for redux dev tools.
      return createStore(
        rootReducer,
        initialState,
        composeEnhancers(applyMiddleware(thunk, reduxImmutableStateInvariant()))
      );
    }

Вот что мой Компонент выглядит следующим образом.

Мой вопрос: когда я смотрю на свои devtools, состояние сообщений полностью пустое. Когда я устанавливаю отладчик, мой PostReducer не получает удар. Я думаю, что я все еще что-то упускаю. Я не думаю, что вы можете использовать соединение с крючками. Что мне нужно сделать ниже, чтобы иметь данные в моем состоянии и иметь возможность поразить мой пост редуктор? 

    PostPage
    **************

    import React, { useState, useEffect } from "react";
    import {fetchPosts} from "../../redux/actions/postActions"; 


    const PostsPage = () => {
        const [getPosts, setGetPosts] = useState([]);


        async function fecthData(){
            const res = fetchPosts()
        }

        useEffect( () => {
            fecthData();
        },[]);


        return (
            <div>
                <h2>Posts</h2>
                <p>
                This page is for all the posts.
                </p>
            </div>
        );
    }

    export default PostsPage;

enter image description here

Ответы [ 2 ]

0 голосов
/ 24 января 2020

  1. Проверка внутри fetchPosts метода, axios.get возвращает обещание. вам нужно сделать метод asyn c и обработать данные asyn c.

  2. Вам необходимо отправить действие, чтобы связать действие с состоянием избыточности. 

    // PostAction

    import * as types from "./actionTypes";
    import axios from 'axios';

    const ROOT_URL = 'http://dotsuper.com/api'

    export function fetchPosts(){
        return async (dispatch) => {
          const request = await axios.get(`${ROOT_URL}/post/getposts`); // returns promise.

          dispatch({
             type: types.GETALL_POSTS,
             payload: request
          }); 
        }
    }


    // PostPage

    import React, { useState, useEffect } from "react";
    import {useDispatch} from "react-redux";
    import {fetchPosts} from "../../redux/actions/postActions"; 


    const PostsPage = () => {
        const [getPosts, setGetPosts] = useState([]);

        const dispatch = useDispatch();

        useEffect( () => {
            dispatch(fetchPosts());
        },[]);


        return (
            <div>
                <h2>Posts</h2>
                <p>
                This page is for all the posts.
                </p>
            </div>
        );
    }

    export default PostsPage;
0 голосов
/ 24 января 2020

Вы вызываете генератор действия fetchPosts() внутри вашего компонента, но на самом деле вы никогда не отправляете никаких изменений в ваше состояние. Если вы присмотритесь, то увидите, что вы fetchPosts() возвращаете объект, обычно известный как действия: 

{
   type: types.GETALL_POSTS,
   payload: request
}

Так что, в основном, когда вы вызываете fetchPosts, вы что-то получаете и возвращаете этот объект , Пока что не касается состояния Redux

На следующем шаге вы должны взять этот объект и отправить его в свой магазин, например: 

    const action = await fetchPosts();
    dispatch(action);

Какой когда вы используете Connect с mapDispatchToProps, Connect позаботится об этом за вас.

Отметьте здесь , чтобы получить лучшую asp концепцию.

Однако при использовании с крючками их можно импортировать из react-redux:

useDispatch вместо mapDispatchToProps и

useSelector вместо mapStateToProps

import {useDispatch, useSelector} from 'react-redux';
import myAction from 'path/to/my/action';

const MyComponent = (props) => {
    const myState = useSelector(state => state.myState);
    const dispatch = useDispatch();

    const handleClick = () => {
        dispatch(myAction());
    }

    return (
        ...
    )
}
...