脚本宝典收集整理的这篇文章主要介绍了react-redux，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
使用react-redux的可以将redux与UI组件分开，使组件内不包含任何与redux相关的函数，文件，像Store,dispatch,subscriBTion这些都不会在UI组件里出现，而所有的状态与派发action的函数都由一个容器组件通过PRops的形式传递给UI组件，使得UI组件显得更加纯净
使用步骤
1:安装react-redux
$ npm i react-redux
2:使用connect函数为UI组件创建一个容器组件（每一个需要使用react-redux管理状态的UI组件都需要）
3:之前的redux相关文件不需要做改动
App.js
注意这里使用export default 暴露出去的是容器组件，UI组件App则是作为参数传到connect里
connect()()第一个括号接收两个参数，第一个参数用于将redux中状态映射到子组件的props中，第二个参数用于将dispatch操作映射到子组件的Props中，第二个括号接收子组件
可以看到，App组件中没有出现任何redux的东西，所使用的变量函数都是容器组件通过props传来的，同时也实现了无状态组件
import React, { component } @R_360_2150@ 'react'
import { connect } from 'react-redux';
import { add, minus } from './redux/action/addOrMinus'
import { getFilms } from './redux/action/getFilmsAction'
import { hide, show } from './redux/action/hideOrShow'
import store from './redux/store'
class App extends Component {
render() {
const { add, minus, show, hide, count, films, isShow, getFilms } = this.props
return (
<div>
<p>当前值为：{count}</p>
<button onClick={() => { add(2) }}>+2</button>&nbsp;<button onClick={() => { minus(3) }}>-3</button>
<div>
{isShow && <div style={{ width: '100px', height: '100px', background: 'yellow' }}>我出来了</div>}
<button onClick={() => { show() }}>显示</button> <button onClick={() => { hide() }}>隐藏</button>
</div>
<div>
<button onClick={() => { getFilms() }}>获取电影列表</button>
<ul>
{
films.map((ITem) => {
// console.LOG(store.getstate().getFilmsReducer.films)
return <li key={item.filmId}>{item.name}</li>
})
}
</ul>
</div>
</div>
)
}
}
const mapStateToProps = function (state) {
return {
count: state.handleAddOrMinusReducer.count,
isShow: state.handleShowOrHideReducer.isShow,
films: state.getFilmsReducer.films
}
}
const mapDispatchToProps = {
hide,
show,
add,
minus,
getFilms
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
index.js
index.js中引入Provider，用于将store传给所有组件，底层是使用context实现的
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './03-react-redux/App'; import reportWebVitals from './reportWebVitals'; import store from './03-react-redux/redux/store' import { Provider } from 'react-redux' ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); //订阅redux状态的改变来渲染APP组件，使用react-redux时不必加这个，react-redux会自动刷新，加了反而会报错 // store.subscribe(() => { // ReactDOM.render( // <React.StrictMode> // <App /> // </React.StrictMode>, // document.getElementById('root') // ); // }) // If you want to start measuring PErformance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an Analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
以上是脚本宝典为你收集整理的react-redux全部内容，希望文章能够帮你解决react-redux所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。