react:Redux与 React-Redux状态变更自动刷新
创建 store 文件夹 ,并创建文件 store.js 内容演示如下:
//创建 store 存储所有的数据 import { createStore } from 'redux'; //定义 state 初始化和修改规则 function counterReducer(state=0,action) { // console.log("当前的state",state); switch (action.type) { case "ADD": return state + 1; case "MINUS": return state - 1; default: return state; } } const store = createStore(counterReducer); export default store;
相应的逻辑参数可以根据你的实际业务进行变更。
组件内调用演示:
import React, {Component} from 'react'; //引入store import store from "../../store"; class Index extends Component { //subscrib 订阅、监听:每当数据发生改变的时候,重新渲染 componentDidMount() { //组件已经挂载完成之后 store.subscribe(() => { console.log("state已经发生改变了"); //页面更新的方法有三种,其一强制刷新--this.forceUpdate(); this.forceUpdate(); }) } render() { console.log("store",store); return ( <div> <h3>redux 案例</h3> {/* 我想显示store里面的东西--store.getState()*/} <p>{store.getState()}</p> {/*其实这里点击增加后,state里面的数据已经改变了,只是没有重新渲染*/} <button onClick={()=>store.dispatch({type:"ADD"})}>add</button> </div> ); } } export default Index;
状态继承演示:
import React from 'react'; import Home from "./pages/Home/index"; import * as ReactDOM from "react-dom"; //(只一次)引入store import store from "./store"; import { Provider } from 'react-redux'; ReactDOM.render( <Provider store={store}> <Home/> </Provider>, document.getElementById('root') );
另一个组件,要继承上面组件的 store:
import React, {Component} from 'react'; //引入connect:为子组件提供拿到 store 里面的东西 import { connect } from "react-redux"; class B extends Component { render() { // console.log("props上面",this.props); const {num,dispatch,add,minus} = this.props; return ( <div> <h3>子组件怎么获取到store里面的东西????</h3> <p>{num}</p> <button onClick={add}>add</button> <button onClick={minus}>minus</button> </div> ); } } //connect(第一个参数:)(第二个参数:组件) export default connect( //mapStateToProps 把 state 映射到 props state => ({num:state}), //mapDispatchToProps 把 dispatch 映射到 props { add: () => ({type: "ADD"}), minus: () => ({type: "MINUS"}) } )(B);
暂无评论
发表评论