React-Redux
React-Redux
- React-Redux 是 Redux 的官方 React 绑定库。
- React-Redux 能够使React组件从Redux store中读取数据，并且向 store 分发 actions 以更新数据。
- React-Redux 并不是 Redux 内置，需要单独安装。
- React-Redux 一般会和 Redux 结合一起使用。
一、安装redux、react-redux
npm install redux
npm install react-redux
二、Provider 和 connect
Provider：它是react-redux 提供的一个 React 组件，作用是把state传给它的所有子组件，也就是说 当你用Provider传入数据后 ，下面的所有子组件都可以共享数据，十分的方便。
Provider的使用方法是：用Provider组件包裹在最外层的组件
<Provider store={ store }>
<App />
</Provider>
注意：一定是在Provider中传store
connect：它是一个高阶组件 所谓高阶组件就是给它传入一个组件，它会返回新的加工后的组件，connect 方法有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])后面两个参数可以不写，不写的话它是有默认值的。主要关注前两个参数： mapStateToProps和 mapDispatchToProps;
Ø mapStateToProps：如果定义该参数，组件将会监听 Redux store 的变化。任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。
Ø mapDispatchToProps：如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中dispatch方法会将 actioncreator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。
connect的使用方法是：把指定的state和指定的action与React组件连接起来，后面括号里面写UI组件名
connect(mapStateToProps,mapDispatchToProps)(TbItem)
三、示例：
例1：利用react-redux实现计数器
1、目录结构
2、store.js
import {createStore} from "redux";
export const ADD = 'ADD';
export const MINUS = 'MINUS';
function reducer (state= {count:0},action){
console.log('Action:',action);
switch (action.type) {
case ADD:
return { count: state.count + 1}
case MINUS:
return { count: state.count - 1}
default:
return state
}
}
let store = createStore(reducer);
export default store;
3、action.js
function add() {
return {
type: 'ADD'
}
}
function minus() {
return {
type: 'MINUS'
}
}
const action = { add,minus }
export default action;
4、Counter1.js
import React,{ Component } from "react";
import { connect } from "react-redux";
import action from "../actions/action";
class Counter1 extends Component {
render() {
return (
<div>
<p>{ this.props.count }</p>
<button onClick={this.props.add }>Count++</button>
<button onClick={ this.props.minus}>count--</button>
</div>
)
}
}
const mapStateToProps = state=> state
const mapDispatchToProps = {
...action
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter1);
5、App.js
import logo from './logo.svg';
import './App.css';
import Counter1 from "./components/Counter1";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Counter1 />
</header>
</div>
);
}
export default App;
6、index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import store from "./store/store";
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);
action：行为 它是一个对象 里面必有type来指定其类型 这个类型可以理解为你要做什么，reducer要根据action的type来返回不同的state 每个项目有且可以有多个action。它是 store 数据的唯一来源。通过 store.dispatch() 将 action 传到 store。记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
reducer： 可以理解为一个专门处理state的工厂，给它一个旧数据它会根据不同action.type返回新的数据，每个项目有且可以有多个reducer。reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。
store： store本质上是一个状态树，保存了所有对象的状态。任何UI组件都能直接的从store访问特定对象的状态。每个项目有且只能有一个store。
- 提供 getState() 方法获取 state；
- 提供 dispatch(action) 方法更新 state；
- 通过 subscribe(listener) 注册监听器;
例2：多组件共享store
(1)constants.js（定义公共方法名）
export const ADD_NUMBER = 'ADD_NUMBER'
export const SUB_NUMBER = 'SUB_NUMBER'
(2)actionCreators.js(专门存放方法名)
import {
ADD_NUMBER,
SUB_NUMBER
} from "./constants";
export const addAction = num => ({
type: ADD_NUMBER,
num
})
export const subAction = num => ({
type: SUB_NUMBER,
num
})
(3)reducer.js(存放事件)
import {
ADD_NUMBER,
SUB_NUMBER
} from "../action/constants";
const deflateState = {
counter: 0
}
function reducer(state = deflateState,action){
switch (action.type){
case ADD_NUMBER:
return {...state,counter: state.counter + action.num }
case SUB_NUMBER:
return {...state,counter: state.counter - action.num }
default:
return state;
}
}
export default reducer;
(4)store.js文件
import { createStore } from "redux";
import reducer from "../reducer/reducer";
const store = createStore(reducer);
export default store;
(5)home.js(Home组件)
import React,{ Component } from "react";
import store from "../redux/store/store";
import { addAction } from "../redux/action/actionCreators";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
counter: store.getState().counter
}
}
//订阅
componentDidMount() {
this.unSubscribe = store.subscribe(()=>{
this.setState({
counter: store.getState().counter
})
})
}
//取消订阅
componentWillUnmount() {
this.unSubscribe();
}
render() {
return (
<div>
<h2>Home</h2>
<h3>当前： { this.state.counter }</h3>
<button onClick={ event => this.increment() }>+1</button>
<button onClick={ event => this.addNumber(5) }>+5</button>
</div>
)
}
increment(){
store.dispatch(addAction(1));
}
addNumber(num){
store.dispatch(addAction(num));
}
}
（7）about.js(About组件)
import React,{ Component } from "react";
import store from "../redux/store/store";
import { addAction } from "../redux/action/actionCreators";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
counter: store.getState().counter
}
}
//订阅
componentDidMount() {
this.unSubscribe = store.subscribe(()=>{
this.setState({
counter: store.getState().counter
})
})
}
//取消订阅
componentWillUnmount() {
this.unSubscribe();
}
render() {
return (
<div>
<h2>Home</h2>
<h3>当前： { this.state.counter }</h3>
<button onClick={ event => this.increment() }>+1</button>
<button onClick={ event => this.addNumber(5) }>+5</button>
</div>
)
}
increment(){
store.dispatch(addAction(1));
}
addNumber(num){
store.dispatch(addAction(num));
}
}
(8)App.js
import logo from './logo.svg';
import './App.css';
import Home from "./components/home";
import About from "./components/about";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Home />
<About/>
</header>
</div>
);
}
export default App;
(9)index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from "./redux/store/store";
import { Provider } from "react-redux";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
例3、合并多个reducer
(1)目录结构
(2)action文件
2.1、changeAge_action.js
export const CLICK_ADD = 'CLICK_ADD';
export const CLICK_SUB = 'CLICK_SUB';
export function clickAdd() {
return {
type: CLICK_ADD
}
}
export function clickSub() {
return {
type: CLICK_SUB
}
}
2.2、inputInfo.js
export const INPUT_INFO = 'INPUT_INFO';
export function inputInfo(name){
return {
type: INPUT_INFO,
name
}
}
(3)reducer文件
3.1、changeAge_reducer.js
import { CLICK_ADD,CLICK_SUB } from "../actions/changeAge_action";
function initialState() {
return {
age: 20
};
}
function changeAge(state=initialState(),action) {
switch (action.type) {
case CLICK_ADD: {
return {
...state,
age: state.age + 1
}
}
case CLICK_SUB: {
return {
...state,
age: state.age - 1
}
}
default:
return state;
}
}
export default changeAge;
3.2、inputInfo_reducer.js
import { INPUT_INFO } from "../actions/inputInfo_action";
function initialState() {
return {
name: "ZhangSan"
}
}
function inputInfo(state= initialState(),action) {
switch (action.type) {
case INPUT_INFO: {
return {
...state,
name: action.name
}
}
default:
return state;
}
}
export default inputInfo;
3.3、rootReducer.js
(4)store.js文件
import { createStore } from "redux";
import rootReducer from "../reducer/rootReducer";
const store = createStore(rootReducer);
export default store;
(5)组件
5.1、Name组件(name.js)
import React,{ Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
class Name extends Component {
render() {
const { name } = this.props
return (
<div>
My name is <i>{ name }</i>
</div>
)
}
}
Name.propTypes = {
name: PropTypes.string.isRequired
}
const mapStateToProps = (state)=> {
return {
name: state.Name_store.name
}
}
export default connect(mapStateToProps)(Name);
5.2、Age组件(age.js)
import React,{ Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {clickAdd,clickSub } from "../actions/changeAge_action";
class Age extends Component{
constructor(props) {
super(props);
this.clickAdd = this.clickAdd.bind(this);
this.clickSub = this.clickSub.bind(this);
}
render() {
const { age } = this.props
return (
<div>
I am <i>{ age } </i>years old this year
<button onClick={this.clickAdd }>Add Age</button>
<button onClick={this.clickSub }>Sub Age</button>
</div>
)
}
clickAdd(event) {
this.props.dispatch(clickAdd());
}
clickSub(event) {
this.props.dispatch(clickSub());
}
}
Age.propTypes = {
age: PropTypes.number.isRequired
}
const mapStateToProps = (state) => {
return {
age: state.Age_store.age
}
}
export default connect(mapStateToProps)(Age);
5.3、Form组件(form.js)
import React,{Component} from "react";
import {connect} from "react-redux";
import { inputInfo } from "../actions/inputInfo_action";
class Form extends Component {
constructor(props) {
super(props);
this.clickSubmit = this.clickSubmit.bind(this);
}
render() {
return (
<div>
<input type={"text"} placeholder={"name"} id={"nameInput"}/>
<button onClick={ this.clickSubmit }>提交</button>
</div>
)
}
clickSubmit(event) {
let name = document.getElementById('nameInput').value;
console.log(name);
this.props.dispatch(inputInfo(name));
}
}
export default connect()(Form);
(6)App.js
import logo from './logo.svg';
import './App.css';
import Name from "./redux/components/name";
import Age from "./redux/components/age";
import Form from "./redux/components/form";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Name />
<br/>
<Age />
<br/>
<Form />
</header>
</div>
);
}
export default App;
(7)index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import store from "./redux/store/store";
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);
