react开发教程(十)redux结合react

描述

Redux 和 React 之间没有关系。Redux 可以搭配 React、Angular 甚至纯 JS。但是 Redux 还是比较适合和 React 搭配的,因为 React 允许你以 state 的形式来描述界面,而 Redux 非常擅长控制 state 的变化。

Redux 和 React 的结合需要用到 redux-react 这个库

案例说明

目录

├── README.md
├── index.js
├── action
│   └── home.js
│   └── about.js
├── actionType
│   ├── index.js
├── reducer
│   └── home.js
│   └── about.js
│   └── index.js
└── view
    └── Home.jsx
    └── About.jsx

ActionType

抛出两个type常量

export const SET_AGE = 'SET_AGE'
export const SET_NAME = 'SET_NAME'

Action

创建动作

//home.js
import {SET_NAME,SET_AGE} from '../actionType'

export function set_age (age) {
  return {
    type: SET_AGE,age
  }
}

export function set_name (name) {
  return {
    type: SET_AGE,name
  }
}

//about.js同上,就是一个模拟,可以写不同的数据

reducer规则

//reducer/home.js

import {SET_NAME,SET_AGE} from '../ActionType'

const initialState = {
  name: '刘宇',age: 100
}

export default (state = initialState,action) => {
  switch (action.type) {
    case SET_NAME:
      return Object.assign({},state,{
        name: action.name
      })
    case SET_AGE:
      return Object.assign({},{
        age: action.age
      })
    default:
      return state
  }
}

//reducer/about.js   同上写法可自定义

//reducer/index.js
import {combineReducers} from 'redux'
import home from './home'
import about from './about'

export default combineReducers(
  {
    home,about
  }
)

view

bindActionCreators:把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 action creator 包围起来,这样可以直接调用它们。
connect:连接 React 组件与 Redux store。

import React,{ Component } from 'react';
import * as pageActions from '../../action'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'

class InBox extends Component {
  constructor (props) {
    super(props)
    console.log(this.props)
  }

  render() {
    return (
      <div className="InBox">
        index
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
      pageState: state.home
  }
}

function mapDispatchToProps(dispatch) {
  return {
    pageActions: bindActionCreators(pageActions,dispatch)
  }
}

export default connect(
  mapStateToProps,mapDispatchToProps
)(InBox)

// export default InBox;

index.js

将react和redux结合

createStore:创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
<Provider /> :是由 React Redux 提供的高阶组件,用来让你将 Redux 绑定到 React,让所有容器组件都可以访问 store,而不必显示地传递它。只需要在渲染根组件时使用即可。

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'

import {
  BrowserRouter as Router,Route,Link,Switch,Redirect
} from 'react-router-dom'
import {Provider} from 'react-redux'

import Home from './view/InBox'
import About from './view/About'
import rootReducer from './Reducer'

//创建store
const store = createStore(rootReducer)

const BasicExample = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/home" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </div>
  </Router>
)

ReactDOM.render(
  <Provider store={store}>
    <BasicExample />
  </Provider>,document.getElementById('root')
);

上一篇react开发教程(九)redux基础

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....