App.js
import React, { Component } from‘react’ import { connect } from‘react-redux’ /** * * 1 创建 store 保存数据关联 reducer * 2 利用 provider 将 store 向后传递 * 3 在具体的组件当中使用 connect 方法获取 store 里保存的数据，通过组件的 Props 进行访问 ，Props调用一个普通方法，普通方法经过/bindActionCreators传入一个对象和dispatch,自动为每个函数dispatch，actions.js设置的组件中的这个普通方法被触发后，执行对应的指令，再把指令传给reducer中这个指令匹配的处理数据方法 * 4 当我们拿到数据之后就可以在界面上渲染了 */ class App extends Component { constructor() { super() this.myRef = React.createRef() } handler = () => { // 获取 input 输入框当中的内容,current属性保存的是当前元素的DOM节点 const content = this.myRef.current.value // 调用 dispatch 方法将输入框中的内容传给 action ，在 reducer 当中进行处理 this.props.dispatch({ type:‘addContent’, content }) // 自动更新界面 this.myRef.current.value = ‘’ } render() { return ( <div> <input type=“text”placeholder=“请输入标题”ref={this.myRef}/> <button onClick={this.handler}>新增</button> <ul> { this.props.content.map((item, index) =><li key={index}>{item}</li>) } </ul> </div> ) } } // 从 store 当中来获取当前组件需要使用的数据 const mapStateToProps = (state) => ({ content:state.content }) export default connect(mapStateToProps)(App)index.js
import React from‘react’; import ReactDOM from‘react-dom’; import App from‘./App’ import { createStore } from‘redux’ import { Provider } from‘react-redux’ // 3 定义初始的store 数据 const initialState = { content: [‘默认数据’] } // 2 创建 reducer function reducer(state = initialState, action) { // state reducer 当中处理完数据之后返回给 store 进行存储的数据 // action store 传递给 reducer 的具体指令 console.log(action, “<<<<<<<<<”) switch (action.type) { case ‘addContent’: return { content: [ …state.content, action.content ] } default: return state } } // 1 创建 store 存储数据 const store = createStore(reducer) console.log(store.getState()) ReactDOM.render( <React.StrictMode> <Provider store={store}><App/></Provider> </React.StrictMode>, document.getElementById(‘root’) );
若有收获，就点个赞吧
0 人点赞
