在redux中更新状态-Java 学习之路

我是redux的新手，大多数事情都很模糊 . 如在redux中更新状态 .

考虑一下，我有一个容器，我称之为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的状态 .

当我做这样的事情时，我正在从redux状态的上面的代码片段中加密 .

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

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

获取硬币中的数据正在通过行动

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
    }))
  }
}

[Question]: 如何发送动作来更新状态？

[更新：]以下是我的减速机的样子

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

[Re: Question] 如何在Redux中更新现有状态？即我的websocket发送我想在此更新的数据

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

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 .

回复于 2024-05-02T21:05:31+08:00

在redux中更新状态

1 回答

相关问题