一个带有路由的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(
<HashRouter>
<Provider store={store}>
<App />
</Provider>
</HashRouter>,
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 (
<Switch>
<Route path="/index" component={Index}></Route>
<Redirect to="/index"></Redirect>
</Switch>
)
}
}
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 (
<div className="counter-1610608560715">
<div className="wrap">
<span className="sp1">{value}</span>
<button onClick={onIncreaseClick}>增加</button>
{/*通过点击事件触发绑定的属性,很明显,在这里onIncreaseClick是一个方法或者是一个对象的key值,其映射的value值是一个函数*/}
</div>
</div>
)
}
}
export default connect(demo)
对应的index.css文件
.counter-1610608560715 .wrap {
height: 200px;
width: 500px;
border: 1px solid red;
text-align: center;
line-height: 200px;
border-radius: 10px;
}
.wrap .sp1{
margin-right: 10px;
}
根目录下views文件夹中index组件
import React, { Component } from 'react'
import connect from '../../store/dispatch'
import './index.css'
import Counter from '../../views/Counter/Counter.jsx'
class example extends Component {
constructor() {
super()
this.state = {
name: '这是首页',
}
}
render() {
let { value, onClick1 } = this.props
return (
<div className="index_1610611850499">
<div>
{this.state.name}
{value}
</div>
<Counter></Counter>
<button onClick={onClick1}>数据清零</button>
</div>
)
}
}
export default connect(example)
对应的index.css文件
.index_1610611850499{
background-color: #806d9e;
width: 50%;
color: #fff;
}
