javascript - redux-saga takeEvery 仅在单击 btn 时调用，componentDidMount 不会正确调用操作

Question

抱歉我的英语!

我正在 React.js 上进行测试工作。任务是制作一个常规博客。我遇到了一个不需要的问题。通常，componentDidMount 会生成条目、准备好数据并被调用一次。我调用 CDM 中的 loadPosts 操作来获取数据。takeEvery 效果看到必要的传奇，但不会导致它，而是跳过它。当我按下按钮时，一切正常。

我是 React 新手。我尝试过的只是谷歌

repository with project分支 - dev-fullapp

<小时/>

index.js

 import store from "./redux/store";

    const app = (
      <BrowserRouter>
        <Provider store={store}>
          <App />
        </Provider>
      </BrowserRouter>
    );

<小时/>

store.js

    import { createStore, compose, applyMiddleware } from "redux";
    import createSagaMiddleware from "redux-saga";
    import apiSaga from "./sagas/index";
    import rootReducer from "./reducers/index";

    const initialiseSagaMiddleware = createSagaMiddleware();

    const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(
      rootReducer,
      storeEnhancers(applyMiddleware(initialiseSagaMiddleware))
    );

    initialiseSagaMiddleware.run(apiSaga);
    export default store;

<小时/>

sagas.js

    import { put, call, takeEvery } from "redux-saga/effects";
    import { fetchGetPosts } from "../apis/index";
    import { setErrorPosts, setPosts } from "../actions/actions-posts";

    function* workerGetPosts() {
        try {
            const posts = yield call(fetchGetPosts);
        yield put(setPosts(posts));
      } catch (err) {
            yield put(setErrorPosts(err));
      }
    }

    export default function* watchSaga() {
        yield takeEvery(POSTS.LOADING, workerGetPosts);
    }

<小时/>

actions.js

    import { POSTS } from "../constants";

    export const loadPosts = () => {
        console.log('action-load')
        return {
        type: POSTS.LOADING
        }
    };

    export const setPosts = payload => ({
      type: POSTS.LOAD_SUCCESS,
      payload
    });

    export const setErrorPosts = error => ({
      type: POSTS.ERROR,
      error
    });

<小时/>

rootReducer.js

    import { combineReducers } from "redux";

    import postsReducer from "./reducer-posts";
    import loadReducer from "./reducer-load";

    const rootReducer = combineReducers({
      posts: postsReducer,
      isLoad: loadReducer
    });

    export default rootReducer;

<小时/>

reducer-posts.js

    import { POSTS } from "../constants";

    const postState = {
      posts: []
    };

    function postsReducer(state = postState, action) {
      switch (action.type) {
        case POSTS.LOAD_SUCCESS:
          return {
            ...state,
            posts: [...action.payload]
          };
        default:
          return state;
      }
    }

    export default postsReducer;

<小时/>

reducer-load.js

    import { POSTS } from "../constants";
    import { combineReducers } from "redux";

    const loadReducerPosts = (state = false, action) => {
      switch (action.type) {
            case POSTS.LOADING: return false;
            case POSTS.LOAD_SUCCESS: return true;
        case POSTS.ERROR: return false;
        default: return state;
      }
    };

    const loadReducer = combineReducers({
      isLoadPost: loadReducerPosts,
    });

    export default loadReducer;

<小时/>

新闻.jsx

    class News extends Component {
      componentDidMount() {
        loadPosts();
      }

      render() {
            CONST { loadPosts }this.props
        return (
          <main>

            // code

            <button onClick={loadPosts}>Test Button</button>
          </main>
        );
      }
    }

    const mapStateToProps = (
        { posts: { loading, posts, success } }
    ) => ({
      posts,
      loading,
      success
    });

    export default connect(
      mapStateToProps,
      { loadPosts }
    )(News);

<小时/>

Answer 1

loadPosts 方法在当前情况下可用作 React 组件的 props。与 componentDidMount 不同，单击按钮时，您将从 props 调用该函数。您必须在两个地方都使用 this.props.loadPosts()