Question

我的英语很抱歉！

我正在对React.js进行测试。任务是创建一个常规博客。我遇到了一个不必要的问题。通常，componentDidMount创建条目，准备好数据并被调用一次。我在CDM中调用loadPosts操作以获取数据。 takeEvery效果看到了必要的传奇，但并没有引起它，而是跳过了它。当我按下按钮时，一切正常。

我是React的新手。我只尝试过Google

repository with project branch - 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;

news.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组件的道具。与componentDidMount中不同，在单击按钮时，您从props调用该函数。您必须在两个地方都使用this.props.loadPosts()

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

1 个答案: