我试图返回不带API的令牌,但它一直返回未定义状态。此刻的目的只是根据道具中是否有令牌显示可选的两个元素,为以后我实际实现API时做准备。
我尝试了不同的传奇效果,并多次修改了我的代码。似乎没有太多有关设置初始状态的信息,所以我想知道这是否是问题所在,并且我正在尝试选择不存在的状态?虽然我相信应该由减速器处理?
我的代码如下:
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);
答案 0 :(得分:0)
为了在组件中获取令牌,您应该更改mapStateToProps
函数:
const mapStateToProps = state => ({
token: state.Auth.token
});
为了获得传奇,您应该更改getToken
选择器
const getToken = (state) => state.Auth.token;