在 redux 中更新状态答案

【问题标题】：Updating state in redux在 redux 中更新状态
【发布时间】：2019-01-19 08:52:52
【问题描述】：

我是 redux 的新手，大多数事情都有些模糊。比如在 redux 中更新 state。

考虑到这一点，我有一个容器，我称之为 websocket

componentDidUpdate() {
    var socket = openSocket('https://coincap.io');
    var updateCoinData = [...this.props.cryptoLoaded]; //
     socket.on('trades', (tradeMsg) => {  
      for (let i=0; i<updateCoinData.length; i++) {

        if (updateCoinData[i]["short"] == tradeMsg.coin ) {     

        //Search for changed Crypto Value 
        updateCoinData[i]['price'] = tradeMsg['message']['msg']['price']

        //Update the crypto Value state in Redux

          }
        }
     })
  }

在这里，我从 websocket 获取更改的数据，现在我想用新数据更新我的 redux 的状态。

当我做这样的事情时，我在上面的代码 sn-p 中从 redux 状态被加密加载..

const mapStateToProps = state => {
  return {
    cryptoLoaded: state.posts.itemsSucess
   // cryptoIsloading: state.posts.cryptoIsloading
  }
};

export default connect(mapStateToProps, {fetchCoin})(cryptoTicker);

fetch coin 中的数据是通过 action 来的

import axios from 'axios';
import {CRYPTO_FETCHING, CRYPTO_DATA_FAIL, CRYPTO_FETCH_SUCESS, UPDATE_CRYPTO_DATA} from './type.js';
import {ApiCoinCap} from '../urls.js';


export const fetchCoin = () => {
  return function (dispatch) {
    dispatch({type: CRYPTO_FETCHING})
    axios.get(ApiCoinCap).then((response) => dispatch({
      type: CRYPTO_FETCH_SUCESS,
      payload: response.data
    })).catch(error => dispatch({
      type: CRYPTO_DATA_FAIL,
      payload: error.data
    }))
  }
}

[问题]：如何调度操作来更新状态？

[更新：]这是我的减速器的样子

   import {CRYPTO_FETCHING, CRYPTO_DATA_FAIL, CRYPTO_FETCH_SUCESS} from './../actions/type.js';


const initialState = {
  itemsSomething : [],
  itemsSucess: [],
  itemsFail: []


}


export default function(state = initialState, action) {

  switch(action.type) {
    case CRYPTO_FETCHING:
    return {
      ...state,
      itemsSomething: action.payload
    }
    case CRYPTO_FETCH_SUCESS:
      return {
        ...state,
        itemsSucess: action.payload
      }
      case CRYPTO_DATA_FAIL:
      return {
      ...state,
      itemsFail: action.payload
    }
    default:
      return state
  }
}

我后来通过做这样的事情结合起来

import { combineReducers } from 'redux';
import postReducer from './postreducer';

const rootreducer = combineReducers({
  posts: postReducer
})

export default rootreducer

[回复：问题]如何更新我在 Redux 中的现有状态？即我的 websocket 发送我想在这里更新的数据

case CRYPTO_FETCH_SUCESS:
          return {
            ...state,
            itemsSucess: action.payload
          }

【问题讨论】：

标签： reactjs redux

【解决方案1】：

[问题]：我如何调度一个动作来更新状态？

您可以使用 react-redux 库中的 mapDispatchToProps 函数执行此操作，并且您还需要 redux thunk 库中的异步操作创建器。

你的 mapDispatchToProps 函数看起来像这样

function mapDispatchToProps (dispatch) {
  return {
    crypto_success: (res) => dispatch(ACTIONS.set_crypto(res)),
  }
}

ACTIONS.set_crypto() 将是您必须在操作文件中定义的 redux thunk，然后在此处导入函数。像

import * as ACTIONS from **Location of your actions file**

你的 axios 获取请求应该是

axios.get(ApiCoinCap)
 .then(res => this.props.crypto_success(res.data))

最终动作创建者将是这个

export function set_crypto(data) {
  return dispatch => {
    dispatch({type: ACTION_TYPES.CRYPTO_FETCH_SUCESS, payload: data})
  }
}

你还需要修改你的根 index.js 文件以使用 redux thunk 像这样

import { Provider } from 'react-redux';
import rootReducer from './store/reducers/index';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';



let store = createStore(
                        rootReducer,
                        applyMiddleware(thunk)
                      )


ReactDOM.render(<Provider store={store}>
                  <App />
                </Provider>,
                document.getElementById('root'));

就是这样，您现在应该能够将来自 axios 调用的数据保存到 redux。

【讨论】：