搭建一个React-redux-router + antd项目（一）初始化项目
搭建一个React-redux-router + antd项目（二）安装 redux、router、axios和antd
搭建一个React-redux-router + antd项目（三）使用路由
一般项目模块较多，建议独立管理维护。实例：在login文件目录下创建reducer.js
// login/reducer.js
export default function login(
state = {
loading: false,
},
action
) {
switch (action.type) {
default:
return state;
}
}
在src下创建一个reducers.js 用来整合管理每个模块创建的reducer
// src/reducers.js
// 引入 combineReducers 用来整合所有的reducer
import {combineReducers} from "redux";
// 引入 刚刚创建的 login reducer
import login from "./main/login/reducer";
let Reducers = combineReducers({
login,
});
export default Reducers;
打开src/index.js 引入reducers、中间件，并给组件绑定唯一的store
// src/index.js
+ import Reducers from "./reducers";
// createStore 构造 项目唯一的store, applyMiddleware用来拓展thunk 中间件
+ import { createStore, applyMiddleware } from "redux";
// 中间件，用来处理异步请求获得的数据
+ import thunk from "redux-thunk";
// Provider 用于结合react和redux;
+ import { Provider } from "react-redux";
+ const store = createStore(Reducers, applyMiddleware(thunk))
ReactDOM.render(
+ <Provider store={store}>
<HashRouter>
<App />
</HashRouter>
+ </Provider>,
document.getElementById('root'));
serviceWorker.unregister();
redux初始化已完成，在组件中绑定state就可以使用this.props访问reducer中的状态了
在 login/login.js 中修改添加：
// login/login.js
// 引入"react-redux"两个API中的高阶函数 connect（另一个是 Provider），用来将state绑定到Connect组件的参数上
+import { connect } from "react-redux";
- export default class Login extends Component {
+ class Login extends Component {
render() {
+ console.log(this.props.loading)
return(
<div>登录</div>
)
}
}
+ export default connect(state => state.login)(Login);
在控制台就可以打印出 false
下一篇：使用action更新store
搭建一个React-redux-router + antd项目（五）用action更新store
搭建一个React-redux-router + antd项目（六）用 redux-persist 实现数据持久化
