我不知道为什么,一个传奇工作者没有被叫来。
在
sagas/login.js
是
login
工人,在那里我叫另一个行动
getProfile
在里面
操作/配置文件.js
.
yield put({ type: ActionTypes.LOGIN_SUCCEEDED, address: account.address });
被打电话
获取配置文件
也叫行动,但是
获取配置文件
在里面
萨加斯/profile.js
没有被呼叫。
JSX
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import login from 'actions/login';
class Home extends Component {
static propTypes = {
login: PropTypes.func,
};
static defaultProps = {
login: () => null,
};
submit = (e) => {
e.preventDefault();
this.props.login(this.key.value);
};
render() {
return (
<div>
<form onSubmit={this.submit}>
<div className="input-group">
<input
type="password"
className="form-control"
ref={el => (this.key = el)}
/>
<button type="submit" className="btn btn-primary">
Login
</button>
</div>
</form>
</div>
);
}
}
const mapDispatchToProps = dispatch => ({
login: key => dispatch(login(key)),
});
export default connect(
null,
mapDispatchToProps,
)(Home);
操作/login.js
import * as ActionTypes from '../constants/actionTypes';
const login = key => ({
type: ActionTypes.LOGIN_REQUESTED,
key,
});
export default login;
操作/配置文件.js
import * as ActionTypes from '../constants/actionTypes';
const getProfile = id => ({
type: ActionTypes.PROFILE_REQUESTED,
id,
});
export default getProfile;
Sagas/索引.js
import { all, fork } from 'redux-saga/effects';
import watchLogin from './login';
import watchProfile from './balance';
export default function* rootSaga() {
yield all([
fork(watchLogin),
fork(watchProfile),
]);
}
sagas/login.js
import { fork, put, takeLatest } from 'redux-saga/effects';
import { wallet } from '@cityofzion/neon-js';
import getProfile from 'actions/profile';
import * as ActionTypes from '../constants/actionTypes';
function* login(action) {
const { key } = action;
try {
const account = new wallet.Account(key);
yield call(getProfile, account.id);
yield put({ type: ActionTypes.LOGIN_SUCCEEDED, address: account.address });
} catch (error) {
yield put({ type: ActionTypes.LOGIN_FAILED, message: error.message });
}
}
export default function* watchLogin() {
yield takeLatest(ActionTypes.LOGIN_REQUESTED, login);
}
萨加斯/profile.js
import { call, put, takeLatest } from 'redux-saga/effects';
import { api, wallet } from '@cityofzion/neon-js';
import * as ActionTypes from '../constants/actionTypes';
function* getProfile(action) {
const { id } = action;
try {
const profile = yield call(
get,
id,
);
yield put({ type: ActionTypes.PROFILE_SUCCEEDED, profile });
} catch (error) {
yield put({ type: ActionTypes.PROFILE_FAILED, message: error.message });
}
}
export default function* watchProfile() {
yield takeLatest(ActionTypes.PROFILE_REQUESTED, getProfile);
}
索引文件
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import App from 'components/App';
import reducers from 'state/index';
import sagas from 'sagas/index';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
combineReducers({
...reducers,
}),
composeWithDevTools(applyMiddleware(
sagaMiddleware,
)),
);
sagaMiddleware.run(sagas);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app'),
);
包装袋
"dependencies": {
"@cityofzion/neon-js": "^3.8.1",
"axios": "^0.18.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-slidedown": "^1.3.0",
"redux": "^4.0.0",
"redux-saga": "^0.16.0"
},