文档章节

react-redux环境搭建二

l
 lovelan1314
发布于 2017/08/15 00:41
字数 814
阅读 30
收藏 0

项目下载地址https://gitee.com/zhuangy/react-redux

入口文件entry.js   创建store

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';
import { AppContainer } from 'react-hot-loader';
import App from './App';
import createHistory from 'history/createBrowserHistory';
import rootReducer from './reducers/index';
const history = createHistory();
const middleware = routerMiddleware(history)
const middlewares = [thunk, middleware];
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middlewares)));

const render = Component =>
    ReactDOM.render(
        <AppContainer>
            <Provider store={store}>
                <Component />
            </Provider>
        </AppContainer>,
        document.getElementById('root')
    );
render(App)

//模块热更新
if(module.hot) {
    module.hot.accept('./App', () => { render(App) });
}

路由App.js

import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux';
import { Route, HashRouter as Router } from 'react-router-dom'
import createHistory from 'history/createHashHistory'
const history = createHistory()
import HomeContainer from './containers/home/homeContainers'
import Login from './containers/login/Login'
import Register from './containers/register/register'

export default class App extends React.Component {
  render() {
      return (
          <Router history={history}>
              <Route render={({ location }) => {
                  return(
                          <div key={location.pathname}>
                              <Route location={location} exact path="/" component={HomeContainer} />
                              <Route location={location} path="/login" component={Login} />
                              <Route location={location} path="/register" component={Register} />
                          </div>
                  )
              }}/>
          </Router>
    );
  }
}


路由组件主页F:homeContainers.js

import React  from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Header from 'components/homeComponents/header';
import Hot from 'components/hot/hot';

export default class HomeContainer extends React.Component {

    constructor(props) {
        super(props);
        //构造函数用法
        //常用来绑定自定义函数,不要在这里或者组件的任何位置setState,state全部在reducer初始化
    }

    render() {
      alert(this.props.location);
        return(
            <div key={this.props.location}>
                <Header   linkTo="login"  linkToRegister="register"
                />
            </div>
          )
    }
}

路由组件Login.js 

import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import * as login from 'actions/login';
import isEmpty from 'lodash/isEmpty';
/ * dispatch用法:(单个action)bindActionCreators(navActions, dispatch),(多个action)bindActionCreators({...action1, ...action2}, dispatch)
 */
 @connect (
     state => state,
     dispatch => bindActionCreators(login, dispatch)
 )

export default class Login extends React.Component {
constructor(props) {
    super(props);

    this.Click = (event) => {
      event.preventDefault();
        let user = this.refs.user.value;
        let psw = this.refs.psw.value;
        if (isEmpty(user)) {

          alert('用户名为空');
        }
        if (isEmpty(psw)) {
          alert('密码不能为空');
        }
        this.props.login_success(user ,psw);
    }

}
render() {

     const {last_time} = this.props.login;

    return(
        <div>
          <form>
              <div>
              <span>用户名:</span>
              <input type='text' name='user' ref='user' placeholder='请输入用户名'/>
              </div>
              <div>
              <span>密码:</span>
              <input type='text' name='psw' placeholder='请输入密码' ref='psw'/>
              </div>
               <input  type='submit'  value='登陆' onClick={this.Click} />

              <div>
              {last_time}
              </div>
          </form>

        </div>
      )
    }
}

主页中的组件header.js

import React ,{Component} from 'react';
import { Link } from 'react-router-dom';
class  Header  extends React.Component {
  render() {
      const {  linkToRegister,  linkTo  } = this.props  //传参数
      return (
          <div >
              <Link to={linkTo} className="login" >登陆
              </Link>

              <Link to={linkToRegister} className="register" >注册
              </Link>
          </div>
      )
  }
}

export  default  Header;

点击Link标签登陆就会更加to的url跳转,Login组件,输入提交触发action

actions----------login.js

import fetch from 'isomorphic-fetch'

import queryString from 'queryString'

export const success = (data) => ({
    type: 'login_success',
    data
})

/

// 页面初次渲染时获取数据
export const login_success = (user , psw) => {

    return dispatch => {
          fetch('http://localhost:9090/zl.zy/zy/login.do', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            },
            body: queryString.stringify({ 'user': user ,'psw' :psw })

       //用queryString转化,之前用JSON转化不行
        })
        .then((response) => {
          debugger
               if(response.ok){
                  return  response.json();
                }
        })
        .then(data=>
        dispatch(success(data)))
    }
}

// 页面初次渲染时获取数据
export const login_success = (user , psw) => {

    return dispatch => {
          fetch('http://localhost:9090/zl.zy/zy/login.do', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            },
            body: queryString.stringify({ 'user': user ,'psw' :psw })

       //用queryString转化,之前用JSON转化不行
        })
        .then((response) => {
          debugger
               if(response.ok){
                  return  response.json();
                }
        })
        .then(data=>
        dispatch(success(data)))
    }
}

测试的时候后台没有搭建的话可以用  login.js,当提交成功的时候改变last_time

import fetch from 'isomorphic-fetch'

export const login_success= () => ({
    type: 'success',
    last_time:1
})

reducer:  login.js
const initState = {
last_time:'2'
}

export const login = (state = initState, action) => {
    switch (action.type) {
        case "login_success":
            return {
                ...state,
                last_time: action.last_time,
            }
        default:
            return state
    }
}


注册reducer:index.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux'

import { login } from './login';
//注册reducer,每个自定义的reducer都要来这里注册!!!不注册会报错。
const rootReducer = combineReducers({
  routing: routerReducer,
  login
});

export default rootReducer;

最后将login.js中注册提交  last_time=1说明搭建成功

 


 

 

 

 


 


 

© 著作权归作者所有

l
粉丝 3
博文 28
码字总数 27491
作品 0
南京
私信 提问
从零开始搭建React应用(二)——React应用架构

上一篇文章——从零开始搭建 React 应用(一)——基础搭建讲述了如何使用 webpack 搭建一个非常基础的 react 开发环境。本文将详细讲述搭建一个 React 应用的架构。 仓库地址:github.com/...

Mello_Z
2018/07/17
0
0
从零开始搭建React开发环境(一)

项目链接:github.com/MrZhang123/… 核心 React:16.3.2 React-dom:16.3.2 Webpack:4.6.0 React-router-dom:4.2.2 Redux:4.0.0 React-hot-loader:4.1.2 目录结构 基础搭建 首先搭建一个基础的......

Mello_fe
2018/05/12
0
0
使用 create-react-app 构建 react应用程序

本文主要是对SPA搭建的实践过程讲解,在对react、redux、react-router有了初步了解后,来运用这些技术构建一个简单的单页应用。这个应用包括了侧边导航栏与主体内容区域。下面简单罗列了将会...

李晓艳
2018/04/17
352
0
React Native \ WEEX 开发文档汇总

React-Native 开发基础文档 环境构建 参照官方提供文档的指引 集成到现有应用 基本语法 入门基础 组件及api JsX语法基础 React-Native生命周期 ES6基础 promise async/await 状态管理 Redux状...

V1admirMakarov
2018/01/11
0
0
生产模式下禁止React Developer Tools、Redux DevTools的使用

一、React Developer Tools和Redux DevTools的使用思考 React Developer Tools、Redux DevTools 可以给开发人员在研发阶段调试程序带来极大的方便。 但是,很多人忽略了一点:上了生产环境后...

我是leon
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
12分钟前
1
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
14分钟前
1
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
6
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部