账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    redux 的store能在connect后的组件中通过constructor第二个参数获取到吗?
    • 2019-11-29 00:00
    • 11
    48
    0

    网上不是说可以通过constructor(props,context){},然后还有生命周期中的第三个参数获取到store吗,为什么我拿到的总是空

    代码如下,简单来讲就是context全场为空,什么意思

    子组件伪代码

    import React from 'react'
    import { Form, Input, Select, TreeSelect, Button, Row, Col, message } from 'antd'
    import './style/form.scss'
    import store from './store'
    
    const FormItem = Form.Item
    
    // @Form.create()
    class ListForm extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                control: null,
                formItems: null,
                formType: this.props.formType
            }
        }
       
        componentDidMount() {
    
    
        }
        componentWillMount() {
            const action = {
                // 派发一个action
                type: 'transmit_form_api',
                value: this.props.form
            }
            store.dispatch(action)
        }
        componentDidUpdate() {
            console.log('form updated')
        }
       
        render() {
           
            return (
                <div >
                   ...
                </div>
            )
        }
    }
    
    ListForm = Form.create()(ListForm)
    export default ListForm

    父组件伪代码

    import React from 'react'
    import ListForm from 'components/List/ListForm'
    import ListTable from 'components/List/ListTable'
    import { Button, Input, Form } from 'antd'
    import axios from 'axios'
    import { connect } from 'react-redux'
    import store from '../../../components/List/store'
    
    
    const FormItem = Form.Item
    
    
    
    
    class Plugin extends React.Component {
        constructor(props,context) {
            console.log(context)        // {} ?
            super(props)
            this.state = {
                list: []
            }
           
        }
     
        componentDidMount() {
            console.log('page mounted',this.props)
            // this.listForm.setFieldsValue({
            //     odd: 111
            // })
        }
        componentWillUpdate(nextProps,nextState,nextContext) {
            console.log('page willUpdata',nextContext)                  // {} ??
    
        }
        componentDidUpdate(prevtProps,prevtState,p~~~~revContext) {
            console.log('page updated')
            console.log(prevContext)        // {} ??
    
        }
        
        render() {
            // const { getFieldDecorator } = this.listForm
            return (
                <div>
                    <header>info</header>
                    <ListForm
                        showSelectOption={this.selectData}
                        formType={this.formType}
                        onSubmit={this.submitData}
                        export={false}
                        getTableData={this.getTableData.bind(this)} /
                    </ListForm>
                   
    
                </div>
            )
        }
    }
    
    const mapStateToProps = (state) => {
        // console.log(state.listForm)     
        return {
            form: state.listForm
        }
    }
    // export default Plugin
    export default connect(mapStateToProps,null)(Plugin)
    

    路由文件

    import React from 'react'
    import { HashRouter as Router, Route, Switch } from 'react-router-dom'
    import Home from '../view/Home'
    import Plugin from '../view/Plugin/List'
    import store from '../components/List/store/index'
    import { Provider } from 'react-redux'
    
    const routes = (
        <Provider store={store}>
            <Router>
                <Switch>
                    <Route exact path="/home" component={Home}></Route>
                    
                    <Route exact path="/plugin" component={Plugin}></Route>         // 测试的路由页面
                </Switch>
            </Router>
        </Provider>
    )
    
    export default routes
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 嗜血超神 普通会员 1楼

      是的,Redux 的 store 可以通过在构造函数中使用第二个参数来获取到。这个参数通常是一个 Redux 库提供的抽象基类或接口,表示你想要从 store 中获取的数据类型。

      例如,如果你使用的是 Redux 库中的 immer 客户端渲染,你可以这样使用第二个参数:

      ```javascript import { createStore } from 'redux'; import {immer} from 'immer';

      const reducer = (state = {}, action) => { switch (action.type) { case 'UPDATE_DATA': return { ...state, data: action.data }; default: return state; } };

      const store = createStore(reducer);

      export default function MyComponent() { return

      {immer(state)(state.data)}
      ; } ```

      在这个例子中,我们创建了一个新的 Redux 库实例,并在其中定义了一个 reducer 函数。然后,我们在 MyComponent 的构造函数中使用了immer 库的 immer 函数来创建一个状态,并将这个状态传递给组件。

      这样,组件就可以通过这个状态来获取到Redux store 中的数据。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部