React-Redux

概念：React 和 Redux 是两个独立的库，需要React-Redux 绑定两者。

使用（分为两步）：1 全局配置（只需要配置一次）。 2 组件接入（获取状态或修改状态）。

安装yarn add react-redux

1.全局配置

// 导入 Provider 组件
import { Provider } from 'react-redux'
// 导入创建好的 store
import store from './store'

//使用 Provider 包裹整个应用
//将导入的 store 设置为 Provider 的 store 属性值
ReactDOM.createRoot(document.getElementById('root')).render(
    < Provider store={store}>
        <App />
    </Provider >)

2 组件接入

老语法(connect)：

//引入connect
import { connect } from 'react-redux'

class App extends Component {
 console.log(this.props);

//使用数据或方法，都在props里面，例如props.list
...}

// mapStateToProps如果指定函数，那么每次数据改变，都会调用
// 应该返回一个对象,返回值就是，App里this.props的数据
const mapStateToProps = (state, props) => {
  // console.log(props);
  return {
    list: state.news.list,
    page: state.news.page,
    size: state.news.size
  }
}

// connect能从redux中获取数据，里面有几个函数，
// mapStateToProps和分别mapDispatchToProps处理你的 Redux里的state和dispatch

//使用connect
export default connect(mapStateToProps)(App)

在函数式组件

import { connect } from 'react-redux'
function Login(props) {
    console.log(props);
    const login = () => {
        // 比如从服务器获取的数据
        const resData = {
            token: '21342345345',
            userInfo: {
                name: "Jack",
                age: 20,
                sex: "男"
            }
        }
        props.login(resData)
        // props.dispatch(setToken(resData.token))
        // props.dispatch(setUserInfo(resData.userInfo))
    }
..........
}

// mapDispatchToProps将dispatch相关炒作注入到props
// 但props里不会再有dispatch提供使用
const mapDispatchToProps = (dispatch, props) => ({
    // console.log(props);
    login(data) {
        dispatch(setToken(data.token))
        dispatch(setUserInfo(data.userInfo))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Login)

新语法： useDispatch, useSelector

import { useDispatch, useSelector } from 'react-redux'

function App() {

//useDispatch获取dispatch相关的操作
  const dispatch = useDispatch()

//获取数据useSelector，下面获取数据，不用props.了
  const { list, page, size } = useSelector(state => state.news)

  useEffect(() => {
    // 发送ajax请求
    setTimeout(() => {
      const resData = [
        { id: 1, title: "你好" },
        { id: 2, title: "我好的" },
        { id: 3, title: "大家好的" },
        { id: 4, title: "很好很好的" }
      ]
      dispatch(intList(resData))
    }, 3000);
  }, [dispatch])
  return (
    <div>
      App
      <ul>
        {list.map(item => {
          return <li key={item.id}>
            id是：{item.id}，
            标题是：{item.title}，
            <button onClick={() => dispatch(del(item.id))} >删除</button>
          </li>
        })}
      </ul>
      <p>
        页码是:{page}； 每页数量是 {size}
        <button onClick={() => dispatch(changePage(page + 1))} >页码+1</button>
        <button onClick={() => dispatch(changeSize(size + 1))} >每页数量+2</button>
      </p>
      <hr /><hr />
      <Login />
    </div>
  )
}

export default App

import React from 'react'
import { setToken, setUserInfo } from './store/actions/login'
import { useDispatch, useSelector } from 'react-redux'

function Login() {
    const dispatch = useDispatch()
    const { token, userInfo } = useSelector(state => state.login)
    const login = () => {
        // 比如从服务器获取的数据
        const resData = {
            token: '21342345345',
            userInfo: {
                name: "Jack",
                age: 20,
                sex: "男"
            }
        }
        // props.login(resData)
        dispatch(setToken(resData.token))
        dispatch(setUserInfo(resData.userInfo))
    }
    return (
        <div>
            <h3>Login</h3>
            <button onClick={login}>登录</button>
            <p>token是:{token}, <br />用户资料是:{JSON.stringify(userInfo)}</p>
        </div>
    )
}

export default Login