当前位置：首页>数据库>正文

redies怎么更新最新数据 redux如何同步更新数据

数据库2024-04-24 15:46:50

react-redux更新数据的实现思路：

1.先创建仓库,store文件下建立index以及redux，index相当于数据仓库，用于存储数据，而redux相当于仓库的管理者，它会拿到最新的值返回到仓库。

2.在react组件中可以通过

this.state=store.getState();

拿到仓库中的数据进行使用，然后绑定一个方法，方法里其实是一个action，是一个对象，里面的type将告诉redux是否进行数据更新以及怎样进行更新，value则是组件内拿到的最新的值。在方法内可以通过store的dispatch方法将action这个对象转发给redux仓库管理者，redux拿到action后会根据action的内容进行数据更新。

changeInputValue(e){
    const action ={
        type:'change_input_value',
        value:e.target.value
    }
store.dispatch(action)
}

3.redux的内部会接收之前的值以及action，在内部对各种type进行判断后可以知道要更新哪部分的值以及改如何更新，记住：Reducer里只能接收state，不能改变state。所以这里redux会将最新的数据返回给store仓库进行存储。

export default (state = defaultState,action)=>{
    if(action.type === 'changeInput'){
       // 深度拷贝state 因为此时我们只需要更新整个数据上的某一部分
       // 我们将数据进行拷贝后挂载新更新的部分进行返还即可
        let newState = JSON.parse(JSON.stringify(state)) 
        newState.inputValue = action.value
        return newState
    }
    return state
}

4.页面此时还未更新，我们在组件的construtor构造函数订阅redux的状态，以便于每次redux将新数据更新返回给store时组件能即使得到。

constructor(props){
    super(props)
    this.state=store.getState();
    this.changeInputValue= this.changeInputValue.bind(this)
    //----------关键代码-----------start
    this.storeChange = this.storeChange.bind(this)  //转变this指向
    store.subscribe(this.storeChange) //订阅Redux的状态
    //----------关键代码-----------end
}

此时组件订阅到redux状态，那这个状态是什么呢，我们将其声明在下面。其实就是redux状态发生了改变后组件将会得到通知并将这个状态更新到组件内部。

storeChange(){
     this.setState(store.getState())
 }

注意点：

1.单一数据源

所有的state都放在一个状态管理器中进行管理。

2.state是只读的

唯一改变state的办法就是action,action是一个描述已发生事件的普通对象。

3.使用纯函数来进行修改

为了描述action如何改变state tree,需要去编写reducers,reducers只是一些纯函数，它接受先前的state和action，返回新的state

查看全文

https://www.xamrdz.com/database/6o61932711.html

react-redux更新数据的实现思路：

注意点：

相关文章：