react17.x中react-redux的基本使用

使用之前安装react-redux:npm install react-redux

一个项目中用到store中数据的组件有很多,所以应该把他放在App.js
在App.js中引入react-redux。并将子组件使用Provider组件包裹起来

子组件被Provider组件包裹起来后,每个子组件都能通过一些方法获取到store中的数据,将store传递给每个被包裹的子组件

app.js

import TodoList from './views/TodoList'
import { Provider } from 'react-redux'
import store from './store'

function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <TodoList />
      </Provider>
    </div>
  );
}

export default App;

store.js

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(
    reducer
)


export default store

reducer.js

const defaultState = {
    inputVal: 'hello word',
    list: []
}

// reducer中需要返回一个函数,接收旧的 state 和 action,返回新的 state
export default (state = defaultState, action) => {
    return state
}

那么如何在todolist中使用呢

首先在头部引入react-redux的connect方法
connect方法是将该组件和store连接,通过mapStateToProps来连接

import { connect } from 'react-redux'
class TodoList extends Component {
    constructor(props){
        super(props)
    }
    inputValChange = (e) => {
        // console.log(e.target.value)
        let { changeInputVal } = this.props
        changeInputVal(e.target.value)
    }
    onSubmit = () => {

    }
    render() {
        let { inputVal } = this.props
        return (
            <div>
                <input type="text" onChange={(e) => this.inputValChange(e)} defaultValue={inputVal} />
                <button onClick={() => this.onSubmit()}>提交</button>
                {/* <ul>
                    {
                        list.map((item,index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul> */}
            </div>
        )
    }
}

// 将store中的state数据映射给组件,变成组件的props
const mapStateToProps = (state,ownProps)=> {
    return {
        inputVal: state.inputVal
    }
}

//将dispatch方法映射到组件的props
const mapDispatchToProps = dispatch => {
    return {
        changeInputVal: (inputVal) => {
            dispatch({
                type: 'changeInputVal',
                payload: inputVal
            })
            // console.log(inputVal)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

mapDispatchToProps 和mapStateToProps直接将store中的state数据、dispatch方法映射到组件的props中;
当我们使用了mapDispatchToProps 和mapStateToProps 后,就可以直接通过this.props.xxxx来获取
如果我们不希望更新数据的话,将前两个值改为null即可

mapStateToProps 第二个参数只要存储状态发生变化或包装器组件收到新的props(基于浅层相等性比较),就会调用该函数

这时候reducer.js代码就需要接收新的state数据并返回了

在上面我的input组件绑定的是defaultValue,而并不是value,使用value的话会有一个报错,意思是:Input 组件从一个非受控组件变成了一个受控组件
造成这个问题的原因是:初始化时,Input 组件的value值为undefined或者是空。
在这里插入图片描述
有两种方法解决,一种是value改为defaultValue
第二种是在reducer.js中,将state进行一次深拷贝,就是下方注释的代码


const defaultState = {
    inputVal: 'hello word',
    list: []
}

export default (state = defaultState, action) => {
    console.log(action)
    const { type, payload } = action
    if (!payload) return state
    if (type === 'changeInputVal') {
        return payload
        // const newState = JSON.parse(JSON.stringify(state))
        // newState.inputVal = payload
        // return newState
    }
    // return state
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值