import {createStore, combineReducers, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga'
import * as reducer from '../reducer/users';
import rootSaga from '../sagas/sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
combineReducers(reducer),
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);
export default store;
## 然后在入口文件使用 `store`
src/index.js
import {Provider} from 'react-redux';
import store from './redux/store/store';
// 省略其他
ReactDOM.render(
, document.getElementById('root')
);
```
## 在 App.js 中获取 action 和 状态
```
import {registerAction, loginAction} from '../../redux/action/users';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
//省略其他
class App extends Component {
render(){
return(
React 实践项目 (一) React 实践项目 (二) React 实践项目 (三) React 实践项目 (四) React 实践项目 (五)
本次实践代码
部署好的网址
上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理
Rudex
应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action,一个描述发生什么的对象。 为了描述 action 如何改变 state 树,你需要编写 reducers。
我们接下来开始开始进行登陆与注册的状态管理
首先在
src
目录下创建redux
文件夹,目录如下代码可从此获取
记得在
package.json
中更新依赖接下来我会开始解释关键代码
/*
// 初始化状态 const initialState = Immutable.fromJS({ newUser: null, error: null, saveSuccess: false, });
// reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。 export const users = (state = initialState, action = {}) => { switch (action.type) { // 判断 action 类型 case REGISTER_USER:
return state.merge({ // 更新状态 'newUser': action.data, 'saveSuccess': false, 'error': null, }); case REGISTER_USER_SUCCESS: return state.set('saveSuccess', action.data); case REGISTER_USER_FAILURE: return state.set('error', action.data); default: return state } };
import {createStore, combineReducers, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga' import * as reducer from '../reducer/users';
import rootSaga from '../sagas/sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore( combineReducers(reducer), applyMiddleware(sagaMiddleware) );
sagaMiddleware.run(rootSaga);
export default store;
import {Provider} from 'react-redux'; import store from './redux/store/store'; // 省略其他
ReactDOM.render(