一个带有路由的react项目中使用react-redux的方法
一个带有路由的react项目中使用react-redux的方法：
下载项目demo压缩包：https://files.cnblogs.com/files/shidawang/react-app.7z
1根目录的index.js文件：
import React from 'react' //引入react
import ReactDOM from 'react-dom' //引入react-dom相关的对象
import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom'
import App from './App'
import store from './store/index'
//向目标元素渲染容器组件App
//这里的组件Provider是一个react-redux中特殊的组件
//注意:
//1. Provider中有且只有一个子组件(这里就是App容器组件,不一定是容器组件,根据自己的业务需求自己操作)
//2. 使用Provider组件的好处是,只需要给Provider组件设置属性,那么其子组件和其子组件中的子组件都可以直接使用其对应的属性
//3. 避免了组件嵌套之后一个一个传递的复杂操作
ReactDOM.render(
,
document.getElementById('root')
)
2根目录的App.js文件
import React, { Component } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import Index from './views/index/index.jsx'
import './App.css'
class example extends Component {
render() {
return (
)
}
}
export default example
3根目录下store文件夹中index.js文件
import { createStore } from 'redux' //引入redux
// 创建store对象,可以说store是redux的核心,因为根据redux的设计理念,
//对state的操作都是根据store中的各种方法实现的,便于管理
//在这里规定使用redux中的createStore和reducer纯函数结合来得到我们想要的store
let store = createStore(reducer)
// 定义reducer纯函数,reducer函数的作用就是,根据传过来的action和旧state的状态值
//然后根据action的type的值进行不同的操作,进行新的state的返回,从而达到UI组件(展示组件)的重新渲染
function reducer(state = { count: 0 }, action) {
const count = state.count
switch (action.type) {
case 'increase':
return { count: count + 1 }
case 'clear':
return { count: 0 }
default:
return state
}
}
export default store
根目录下store文件夹中dispatch.js文件
import { connect } from 'react-redux'
// mapDispatchToProps是connect的第二个参数
//根据名称我们可以知道是把reducer纯函数中之前store中的dispatch方法和展示组件的props(属性)进行映射
export function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch({ type: 'increase' }),
onClick1: () => dispatch({ type: 'clear' }),
}
}
//mapStateToProps是connect的第一个参数
//根据名称我们知道是把之前reducer纯函数中的state(状态)和展示组件的props(属性)进行映射
export function mapStateToProps(state) {
return {
value: state.count,
}
}
export default function connectMethod(dom) {
return connect(mapStateToProps, mapDispatchToProps)(dom)
}
4根目录下views文件夹中业务组件使用react-redux
根目录下views文件夹中Counter组件
import React, { Component } from 'react' //引入react
import connect from '../../store/dispatch'
import './index.css'
// 创建react组件(或者是虚拟节点)
class demo extends Component {
render() {
const { value, onIncreaseClick } = this.props
//通过解构赋值得到相应的属性里面的值
//在这里Counter是UI组件(展示组件)其属性是其外面的容器组件中的state是通过react-redux中的connect操作之后传递过来的
return (
{value}
增加
{/*通过点击事件触发绑定的属性,很明显,在这里onIncreaseClick是一个方法或者是一个对象的key值,其映射的value值是一个函数*/}
{this.state.name}
{value}