搭建一个React-redux-router + antd项目（四）redux初始

搭建一个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(
+ 
    
      
    
+ ,
  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(
      
登录
    )
  }
}

+ export default connect(state => state.login)(Login);

在控制台就可以打印出 false
下一篇：使用action更新store

搭建一个React-redux-router + antd项目（五）用action更新store
搭建一个React-redux-router + antd项目（六）用 redux-persist 实现数据持久化