react-redux

react-redux

安装

npm install --save react-redux

Provider标签

react-redux 是官方提供的解决方案，Provider 本身并没有做很多事情，只是把store放在context里罢了。实际上如果你用react-redux，那么连接视图和数据层最好的办法是使用 connect 函数。本质上Provider 就是给 connect 提供store用的。

• 在入口文件
  1.引入标签

import {Provider} from ‘react-redux’ //引入标签

• 2.包裹跟组件，与路由标签一样

  ReactDOM.render(
  // 包裹  Provider:显示页面的数据
  <Provider store={store}> 
    <App />
  </Provider>,
  document.getElementById('root')
);

store仓库

• index主入口
  创建仓库，合并reducer

//createStore创建仓库
// combineReducers:就是要合并的reducer
import {createStore,combineReducers} from 'redux' 
import reducer from './reducer'//引入仓库中的reducer纯函数

export default createStore(combineReducers({reducer}))

• reducer纯函数数据

// store 仓库的reducer纯函数
function reducer(state={
    name:'张三',
    age:10
},action){
    switch(action.type){
        case 'change-name':
            return{
                ...state,
                name:action.name
            }
    }
    return state
}

export default reducer;

Inner组件页面

connect方法拿到reducer的数据，return处理之后，传给需要数据的组件
在哪个组件中需要使用redux的数据，就在哪个文件中调用

connect(state的处理函数)(组件):函数，有返回值为函数体 继续调用

• state的处理函数：（state，props）=>{
  return 要传给组件的数据
  }

import React,{Fragment} from 'react'
import { connect } from 'react-redux'

// Inner页面组件
function Inner(props){
    console.log(props); //获取传递的参数
    let {name,age,dispatch} = props
    return (
        <Fragment>
            <p>name:{name}</p>
            <p>age:{age}</p>

            <button onClick={()=>{
                dispatch({
                    type:'change-name',
                    name:'李四'
                })
            }}>修改</button>
        </Fragment>
    )
}
export default connect((state,props)=>{
    console.log(state)
    return state.reducer
})(Inner)

App文件

引入Inner页面，显示页面

import React from 'react';
import Inner from './Inner'
function App() {
  return (
    <div className="App">
      <Inner info = {'父组件传来的数据'}></Inner>
    </div>
  );
}

export default App;

react-redux 7之后才有hooks

• useSelector(回调函数) 通过回电函数的返回值，来获取state
• useStore 直接获取整个仓库
• useDispatch 获取仓库中的dispatch方法

Inner页面hooks写法

import React,{Fragment} from 'react'
import { useDispatch,useSelector,useStore } from 'react-redux'

// Inner页面组件
function Inner(){   
    let {name,age} = useSelector((state)=>{
        return state.reducer
    })
    //useDispatch:修改数据 
    let dispatch = useDispatch();
    return (
        <Fragment>
            <p>name:{name}</p>
            <p>age:{age}</p>

            <button onClick={()=>{
                dispatch({
                    type:'change-name',
                    name:'李四'
                })
            }}>修改</button>
        </Fragment>
    )
}

export default Inner