安装
yarn add react-redux redux
Router.js修改
1、引入
import {Provider} from 'react-redux';
2、引入store
import Store from './store/store.js';
3、入口注入
<Provider store={Store}></Provider>
全部代码如下
import React from 'react';
import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import App from './App.js';
import {Provider} from 'react-redux';
import Store from './store/store.js';
// console.log(Store.getState())
const Router = () => (
<BrowserRouter>
<Provider store={Store}>
<App/>
</Provider>
</BrowserRouter>
)
export default Router;
在src下创建store文件夹再创建store.js
react/react-scss-router/src/store/store.js
import {createStore, combineReducers} from 'redux';
import {reducer as addReducer} from '../views/Action/_index.js';
// import {reducer as testReducer} from '../views/Test/_index.js';
// import {reducer as delReducer} from '../views/Test/_index.js';
const reducer = combineReducers({
add:addReducer,
// testList:testReducer,
// remove:removeReducer,
// edit:editReducer,
})
export default createStore(reducer);
以下在views里创建
react/react-scss-router/src/views/Action/redux/Actions.js
import * as ActionTypes from './ActionTypes';
// import {a,b,c,d} from './ActionTypes';
// ActionTypes.a
// ActionTypes.b
// ActionTypes.c
// {
// type:ActionTypes.ADD_TODO,
// text:'第一个demo'
// }
export const add = () =>{
return{
type:ActionTypes.ADD_TODO,
text:'第一个demo'
}
}
react/react-scss-router/src/views/Action/redux/ActionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const DEL_TODO = 'DEL_TODO';
export const EDIT_TODO = 'EDIT_TODO';
react/react-scss-router/src/views/Action/redux/Reducer.js
import * as ActionTypes from './ActionTypes';
export default (state=[],action)=>{
switch (action.type) {
case ActionTypes.ADD_TODO:
return [
{
type:action.type,
text:action.text
},
...state
]
default:
return state;
}
}
_index.js 是几乎不用再改变的js 文件
react/react-scss-router/src/views/Action/_index.js
import * as actions from './redux/Actions.js';
import reducer from './redux/Reducer.js';
export {actions,reducer};
页面
react/react-scss-router/src/views/Action/index.jsx
直接使用 dispatch
import React , { Component } from 'react';
import {connect} from 'react-redux';
import {actions} from './_index.js';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
class View extends Component {
// changeName(){
//
// }
onAddFn(){
const {dispatch} = this.props;
dispatch(actions.add())
}
render(){
console.log(this.props.addList)
const {addList,onAddFn,dispatch} = this.props;
return (
<React.Fragment>
{addList.length}<br/>
action页面<br/>
{/*<input type="button"
value="点我"
onClick={onAddFn}
/>*/}
<NavLink to="/">首页</NavLink>
<NavLink to="/action">action</NavLink>
<input type="button"
value="点我"
onClick={()=>{this.onAddFn()}}
/>
</React.Fragment>
)
}
}
function mapStateToProps(state) {
console.log(state)
// this.props.addList
// {
// add:[],
// del:[]
// }
return {
addList:state.add
}
}
// const mapDispatchToProps = (dispatch, ownProps) => {
// // {
// // type:'ADD_TODO'
// // }
// // dispatch(actions.add())
// return {
// onAddFn:()=>dispatch(actions.add())
// }
// };
export default connect(mapStateToProps,null)(View);
以上基本完成
另一种使用dispatch的方式
react/react-scss-router/src/views/Action/index0.jsx
另一种使用dispatch的方式
import React , { Component } from 'react';
import {connect} from 'react-redux';
import {actions} from './_index.js';
class View extends Component {
// changeName(){
//
// }
render(){
console.log(this.props.addList)
const {addList,onAddFn} = this.props;
return (
<React.Fragment>
{addList.length}<br/>
action页面<br/>
{/*<input type="button"
value="点我"
onClick={onAddFn}
/>*/}
<input type="button"
value="点我"
onClick={()=>{onAddFn()}}
/>
</React.Fragment>
)
}
}
function mapStateToProps(state) {
console.log(state)
// this.props.addList
// {
// add:[],
// del:[]
// }
return {
addList:state.add
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
// ownProps 父组件有任意参数
// const {name} = ownProps;
// this.props.name
// {
// type:'ADD_TODO'
// }
// dispatch(actions.add())
return {
onAddFn:()=>dispatch(actions.add())
}
};
export default connect(mapStateToProps,mapDispatchToProps)(View);
类组件中使用redux
react/react-scss-router/src/views/Home/index.jsx
import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import {connect} from 'react-redux';
class View extends Component {
render(){
const {addList} = this.props;
return (
<React.Fragment>
{addList.length}
<div className="mian">这是首页面</div>
<NavLink to="/">首页</NavLink><br/>
<NavLink to="/action">action</NavLink>
</React.Fragment>
)
}
}
const mapStateToProps = (state)=> {
return {
addList:state.add
}
}
export default connect(mapStateToProps,null)(View);
函数组件中使用 redux
react/react-scss-router/src/views/Action2/index.jsx
import React, {useState,useEffect} from 'react';
import { useSelector, useDispatch } from "react-redux";
import {actions} from '../Action/_index';
const View = (props)=>{
const state = useSelector((state)=>state);
const add = useSelector((state)=>state.add);
const dispatch = useDispatch();
useEffect(()=>{
dispatch(actions.add())
// dispatch({
// type:"ADD_TODO"
// })
},[])
return(
<div>{add.length}</div>
)
}
export default View;