概念: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