Reactjs 在redux中更新状态

我是新来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

          }
        }
     })
  }

fetch coin中的数据正在通过操作传递

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

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

[Re:Question]如何更新Redux中的现有状态？i、 e我的websocket发送我要在此处更新的数据

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

---

[问题]：如何发送操作以更新状态

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

您的mapDispatchToProps函数将如下所示

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

const rootreducer = combineReducers({
  posts: postReducer
})

export default rootreducer

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 get请求应该是

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

您还需要修改root 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'));

从'react redux'导入{Provider}；
从“./store/reducers/index”导入rootReducer；
从“redux”导入{createStore，applyMiddleware}；
从“redux thunk”导入thunk；
let store=createStore(
减根剂，
applyMiddleware（thunk）
)
ReactDOM.render(
,
document.getElementById（'root'）；

现在，您应该能够将axios调用的数据保存到redux