使用 Redux Saga 从 Redux Store 获取和设置值

Question

我正在尝试 return 没有 API 的标记，但它保持 returning 未定义。目前的目的只是根据 props 中是否有令牌来选择性地显示两个元素，为以后我实际实现 API.

做准备。

我尝试了不同的 saga 效果并且修改了我的代码，次数多得我都数不清了。似乎没有很多关于设置初始状态的信息，所以我想知道这是否可能是问题所在，我正在尝试 select 不存在的状态？虽然我认为这应该由减速器处理？

我的代码如下：

redux/store.js:

import { connectRouter, routerMiddleware } from 'connected-react-router';
import { createBrowserHistory } from 'history';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';

import reducers from './reducers';
import rootSaga from './sagas';

const history = createBrowserHistory();
const routeMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

const middlewares = [thunk, sagaMiddleware, routeMiddleware];

const composeEnhancers =
    typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
        ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
            // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
        })
        : compose;

const store = createStore(
    combineReducers({
        ...reducers,
        router: connectRouter(history),
    }),
    composeEnhancers(applyMiddleware(...middlewares))
);

sagaMiddleware.run(rootSaga);

export { store, history };

redux/reducers.js:

import Auth from './auth/reducer';

export default {
    Auth
};

redux/saga.js:

import { all } from 'redux-saga/effects';
import authSaga from './auth/saga';

export default function* rootSaga(getState) {
    yield all([
        authSaga()
    ]);
};

redux/auth/actions.js:

export const checkAuthAction = (value) => ({
    type: 'CHECK_AUTH',
    value
});

redux/auth/reducer.js:

import { checkAuthAction } from "./actions";

const initialState = {
    token: true
};

const reducer = (state = initialState, action) => {
    switch (action.type) {

        case 'CHECK_AUTH':
            return {
                ...state,
                token: action.token
            };

        default:
            return state;

    };
};

export default reducer;

redux/auth/saga.js

import { select, take } from 'redux-saga/effects';
import { checkAuthAction } from './actions';

// Selectors
const getToken = (state) => state.token;

function* authSaga() {
    const token = yield select(getToken);
    console.log(token);
};

export default authSaga;

编辑：忘记包含组件本身。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

class Nav extends Component {
    componentDidMount() {
        console.log(this.props);
    }

    render() {
        return (
            <nav className="nav">
                {this.props.token ? (
                    <Col type="flex" align="center" className="nav__list__item" md={6}>
                        <Link to="/logout"><IntlMessages id="nav.logout.link" /></Link>
                    </Col>
                ) : (
                    <Col type="flex" align="center" className="nav__list__item" md={6}>
                        <Link to="/login"><IntlMessages id="nav.login.link" /></Link>
                    </Col>
                )}
            </nav>
        );
    };
}

const mapStateToProps = state => ({
   token: state.token
});

const mapDispatchToProps = {
    CHECK_AUTH: 'CHECK_AUTH'
};

export default connect(mapStateToProps, mapDispatchToProps)(Nav);

Answer 1

为了在组件中获取令牌，您应该更改 mapStateToProps 函数：

const mapStateToProps = state => ({
   token: state.Auth.token
});

为了在传奇中获得它，您应该更改 getToken 选择器

const getToken = (state) => state.Auth.token;

使用 Redux Saga 从 Redux Store 获取和设置值

Getting and setting values from Redux Store with Redux Saga

saga

reactjs

react-redux